前端优化方案有哪些?

Posted 2020-12-24 chennanxiangbei

优化方式

• javascript压缩和模块打包

源码解析的效率比字节码低。脚本的大小会对应用启动时间有着负面的影响

模块打包将不同脚本打包在一起并放进同一文件，更少的http请求和单个文件解析都可以减少加载时间（CSS、图片都可以进行打包）

• 按需加载资源

资源的按需加载（惰性加载）

• 减少向服务器发出的并发请求数量

• 减少浏览器的内存使用率（更少的图片，更少的内存）

• 减少服务器端的负载

• 在使用DOM操作库时使用Arrary-ids

使得DOM操作引擎可以[知道]在什么时候某个节点可以被映射到数组当中的某个元素。若没有，大部分库都会进行重新排序而摧毁已有的节点并重新创建新的节点。

• 缓存

用于存储被频繁存取的静态数组的组件，便于随后对于这个数据的请求可以更快地被响应，更高效。减少服务器的负载，改善响应时间。

• 启用HTTP/2

为同一服务器的并发连接问题带来了好处。

• 应用性能分析

盲目尝试优化应用经常会导致效率的浪费。

找到性能损耗的中心可以让你有效率地达到优化的目标

• 关于算法的注意事项

选择一个更优的算法。

• 使用负载均衡方案

为了使负载均衡有效，动态内容和静态内容都应该拆分成易于并发访问的

元素的串形访问会削弱负载均衡器以最佳形式进行分流的能力

！负载均衡可能会很复杂，对最终一致性算法不友好的数据模型，或者缓存都会让事情更加困难。幸运的是，大多应用对于已简化的数据集都只需要保证高层次的一致性即可。

• 为更快的启动时间考虑一下同构

改善Web应用程序观感的方式：

• 减少启动页时间／首页渲染时间

让在服务器端来执行页面，先把已渲染的页面发送出去再由客户端的脚本接管

• 使用索引加速数据库查询

从内部映射到键，可以提高检索相关数据的速度。

• 使用更快的转译方案

模块绑定和压缩处理被集成至生产过程中

• 避免／最小化JavaScript和CSS的使用阻塞渲染

JavaScript和CSS资源都会阻塞页面的渲染.

规则只用于处理你准备在页面上所显示内容的优先级

内联的JavaScript应该尽可能短，

• 图片编码优化

PNG和JPG在Web发布时都会使用次优的设置进行编码，通过改变编码器和它的设置，可以获得有效的改善。

• Feature: 使用Services Workers + 流

！技术所需要的API都还不太稳定

SW可以在获取缺失信息的同时缓存某些数据（header）

缺失的内容就可以尽可能快速地流向被渲染的页面