前端性能优化

参考：Web 前端面试指南与高频考题解析 浏览器相关

优化原则和方向

性能优化的原则是以更好的用户体验为标准，具体就是两个目标：

• 多使用内存、缓存或者其他方法；
• 减少CPU和GPU计算，更快展现。

优化的两个方向：

• 减少页面体积、提升网络加载
  • 静态资源的压缩合并(JS代码合并、CSS代码压缩合并、雪碧图)
  • 静态资源缓存
  • 使用CDN让资源加载更快
• 优化页面渲染
  • CSS放前面，JS放后面
  • 懒加载（图片懒加载、下拉加载更多）
  • 减少DOM查询，对DOM查询做缓存
  • 减少DOM操作，多个操作尽量合并到一起执行(DocumentFragment)
  • 事件节流
  • 尽早执行操作(DOMContenLoaded)
  • 使用SSR后端渲染，数据直接输出到HTML中，减少浏览器使用JS模板渲染页面HTML的时间

上面提到的都是性能优化的单个点，性能优化项目具体实施起来，应该按下面步骤推进：
1.建立性能数据收集平台，摸底当前性能数据，通过性能打点，将上述整个页面打开过程消耗时间记录下来。
2.分析耗时较长时间段原因，寻找优化点，确定优化目标
3.开始优化
4.通过数据收集平台记录优化效果
5.不断调整优化点和预期目标，循环2-4步骤