Web性能优化

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

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？）
• 打包时分包复用

预先加载

• 浏览器在空闲的时间偷偷预先加载， <link rel="prefetch" href="url" target="_blank" rel="external nofollow" >

三、页面渲染阶段

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

四、操作体验阶段

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