前端优化手段总结

学习了很多浏览器原理，下面对我了解的前端优化手段进行总结。
把前端优化手段分为了加载阶段、交互阶段和关闭阶段,而我们关注的主要是加载阶段和交互阶段

加载阶段

该阶段的目标为：

1. 提高传输速度
2. 减少传输关键资源大小

优化手段

提高传输速度

• HTTP2
• CDN

减少传输关键资源大小

• 页面级懒加载
• splitchunks合理分包
• 压缩代码
• gzip
• hash+强缓存或者协商缓存
• js和css内联

交互阶段

该阶段的主要目标为：

1. 减少js长时间执行
2. 减少js的不正确操作引起的重排重绘
3. 减少js的性能消耗

优化手段

减少js脚本执行时间

• 把一次执行的函数分解为多个任务
• 使用Web Workers,把DOM操作无关且耗时的任务放到Web Workers中

减少js的不正确操作引起的重排重绘

• 避免在同一个函数中，同时修改样式和读取样式

减少js的性能消耗

• 避免频繁的垃圾回收，尽可能优化储存结构，尽可能避免小颗粒对象的产生