1、开发构造阶段：在开发时每次修改代码打包需要几分钟，太慢
2、资源加载和页面渲染阶段：打开网站，等了几十秒才看到页面，太慢。
3、操作体验阶段：页面展现后，页面上动画不流畅。滚动页面或者拖拽元素卡顿感严重，甚至页面会崩溃。
一、开发构造阶段：
核心思路是：传输量要小、距离要近、并行传输、资源复用、预先加载。
传输量要小：
- 构建时HTML压缩
- 构建时CSS压缩合并
- 构建时JavaScript压缩合并
- 构建时图片的压缩
- 使用精灵图或者字体图标代替图片ICON
- 服务端开启Gzip，数据在传输之前再次压缩
- 构建时是使用TreeShaking，减少不必要的代码引入
- 单页应用路由懒加载，减少首次加载的资源体积
- 组件懒加载，减少首次加载的资源体积
- 图片懒加载，减少首次加载的资源体积
距离要近：
- 静态资源部署到CDN
CDN(cdn啥，cdn就是缓存服务器，大厂的cdn是由分布在全国各地的服务器组成的网络，也就是使用了tcp分岔，从而提高了云服务的性能（大厂的cdn节点基本上一样多，用大厂的没错）)
并行传输
升级到 HTTP2.0
（常见问题：HTTP2.0相比HTTP1.x做了哪些升级？多路复用；二进制分帧；服务端推送；数据流优先级；头部压缩）
资源复用
打包时分包复用
预先加载
浏览器在空闲的时间偷偷预先加载，
页面渲染阶段
CSS在上、JS在下
加载CSS推荐用 link 少用 @import
不重要的外置引入的JS使用defer或者async属性异步加载
操作体验阶段
动画流畅
1、尽量使用 transition 和 animation来实现CSS动画，而不是JS实现动画（运行在主线程对动画的流畅度有影响）
2、动画尽量多用transfrom 和 opacity （无需重绘和回流，性能最好）
3、translateZ/translate3d 开启硬件加速
4、JS动画使用requestAnimationFrame少用setInterval
滚动/移动/操作流畅
DOM增删操作要少
密集型计算
计算密集型操作可以交给WebWorker并发处理
