浅谈 前端性能优化

在前端的整个学习生涯中，总是能一次次听到“性能”和“体验”这两个词。初始脑海中只有“不要频繁操作DOM” ，“给动画使用绝对定位可以减小reflow......” 等等这些零碎知识片段。通过查阅了一些文章后，我理解并总结了以下这些性能优化的方法，希望下次再回忆起来，能够表达的更具体、更有条理。

1 打包构建快（开发）

• 多进程打包（thread-loader）
• 将不常变化的代码提前打包，提高打包速度，降低打包时间（DllPlugin+DllReferencePlugin）
• 打包时配置缓存（在开发环境，webpack.config.js里设置cache为true）
• 过滤不相关的目录（配置里设置）

2 资源加载快（下载）

• 传输量要小：

  • 资源合并，使HTML/CSS/JS/图片压缩合并
  • 服务端开启 gzip，数据在传输之前再次压缩
  • 懒加载：图片/组件/路由，按需加载，减少首次加载的资源体积
  • 打包时使用TreeShaking，减少不必要的代码引入

• 距离要近：静态资源（图片、CSS、JS）部署到CDN上
• 并行传输：升级到 HTTP2.0 （相比HTTP1.x做了哪些升级？多路复用；二进制分帧；服务端推送；数据流优先级；头部压缩）
• 资源复用：服务端配置静态资源缓存（HTTP缓存策略？Cache-Control？304？ETag？）

3 页面展现快（渲染）

• CSS在上、JS在下（CSS放在head里，JS放在body底部，CSS、JS阻塞）
• 加载CSS推荐用link少用@import
• 不重要的资源使用async或者defer属性异步加载（如第三方广告）

4 用户体验流畅（使用）

• 动画流畅

  • 使用transition和animation来实现CSS动画（GPU渲染速度快），而不是JS（CPU）
  • 多使用transform和opacity，少用浮动
  • JS动画使用requestAnimationFrame少用setInterval

• 滚动页面/移动窗口流畅

  • 减少DOM增删操作（DOM Diff）
  • 高频操作使用防抖和节流

• 计算密集操作：交给WebWorker并发处理（对页面进行计算）

总结：重点是 压缩、并发、缓存

• 压缩：静态资源的压缩合并、Gzip、各种懒加载、开发打包时的缩小文件搜索范围
• 并发：HTTP2多路复用并发请求，多进程打包
• 缓存：资源请求时HTTP2.0缓存，打包缓存

还整理了一篇补充：前端性能优化（二）