思路一、从日常接触到的前端性能场景出发

性能瓶颈主要出现在三个场景

  1. 在开发时每次修改代码打包需要几分钟，太慢（开发构建阶段）
  2. 打开网站，等了几十秒才看到页面，太慢（资源加载和页面渲染阶段）
  3. 页面展现后，页面上动画不流畅。滚动页面或者拖拽元素卡顿感严重，甚至页面会崩溃（操作体验阶段）

一、开发构建阶段（常见问题：如何让Webpack打包更快）

  • 并发：使用多进程打包
  • 缓存：打包时利用缓存
  • 打包量要小：缩小文件搜索范围，减小不必要的编译工作

二、资源加载阶段
核心思路是：传输量要小、距离要近、并行传输、资源复用、预先加载。
传输量要小

  • 构建时HTML压缩
  • 构建时CSS压缩合并
  • 构建时JavaScript压缩合并
  • 构建时图片的压缩
  • 使用SVG sprite 或者字体图标代替图片ICON
  • 服务端开启Gzip，数据在传输之前再次压缩
  • 构建时是使用TreeShaking，减少不必要的代码引入
  • 单页应用路由懒加载，减少首次加载的资源体积
  • 组件懒加载，减少首次加载的资源体积
  • 图片懒加载，减少首次加载的资源体积

距离要近

  • 静态资源部署到CDN

并行传输

  • 升级到 HTTP2.0 （常见问题：HTTP2.0相比HTTP1.x做了哪些升级？多路复用；二进制分帧；服务端推送；数据流优先级；头部压缩）

资源复用

  • 服务端配置静态资源缓存（常见问题：HTTP缓存策略？Cache-Control？keep-alive？304？ETag？）
  • 打包时分包复用

预先加载

  • 浏览器在空闲的时间偷偷预先加载，

三、页面渲染阶段

  • CSS在上、JS在下
  • 加载CSS推荐用 link 少用 @import
  • 不重要的外置引入的JS使用defer或者async属性异步加载

四、操作体验阶段

  • 动画流畅
    • 尽量使用 transition 和 animation来实现CSS动画，而不是JS实现动画（运行在主线程对动画的流畅度有影响）
    • 动画尽量多用transfrom 和 opacity （无需重绘和回流，性能最好）
    • translateZ/translate3d 开启硬件加速
    • JS动画使用requestAnimationFrame少用setInterval
  • 滚动/移动/操作流畅
    • DOM增删操作要少(虚拟长列表、DOM Diff)
    • 高频操作使用防抖和节流
  • 密集型计算
    • 计算密集型操作可以交给WebWorker并发处理

再聊性能优化 - 图1

思路二、从生活角度聊前端性能

假设你是公司的CTO，现在有一个产品需要在尽可能短的时间内上线，在现有团队不加班不996的前提下如何做？方案无外乎是：

  1. 压缩需求，迭代开发——压缩
  2. 多用旧轮子(代码、方案、架构)少造新轮子——缓存
  3. 增加人手——并发

和前端性能优化做对应

  • 压缩需求，迭代开发：静态资源的压缩合并、Gzip、各种懒加载、开发打包时的缩小文件搜索范围
  • 多用旧轮子(代码、方案、架构)少造新轮子：资源请求时HTTP缓存、开发打包时配置使用缓存、打包时配置分包复用
  • 增加人手：资源请求时使用HTTP2实现并发请求、开发打包时配置使用并发能力、WebWorker

提到性能，大脑里需要浮现6字箴言：压缩、缓存、并发。