前端的性能优化

• 前端的性能优化包括四个阶段开发构建阶段、资源加载阶段、页面渲染阶段、操作体验阶段。

开发构建阶段（然后让Webpack打包更快）

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

资源加载阶段

• 核心思想是：传输量要小、距离要近、并行传输、资源复用、预先加载

传输量要小

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

距离要近

• 静态资源部署到CDN（CSS、JS、图片等）

并行传输

• 升级到 HTTP2.0

HTTP2.0相比于HTTP.1做了哪些升级？

多路复用；二进制分帧；数据流优先级；头部压缩；服务端推送

资源复用

• 服务端配置静态资源缓存
• 打包时分包复用

预先加载

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

页面加载阶段

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

操作体验阶段

动画流畅

• 尽量使用transition和animation来实现CSS动画，而不是JS实现动画（运行在主线程对动画的流畅度有影响）
• 动画尽量多余用 transform和opacity（无需重绘和回流，性能最好）
• JS动画使用requestAnimationFrame少用setInterval

滚动/移动/操作流畅

• DOM增删操作要少（虚拟长列表、DOM Diff）
• 高频操作使用防抖和节流

密集型计算

• 计算密集型操作可以交给WebWorker并发处理