性能优化总结

1. css 和 js 优化

   1. 减少css和js阻塞；
   2. 优化样式表的代码（选择器的权重）；
   3. 异步加载js（ script 标签加上 defer 属性），放在页面底部；
   4. 对css、js进行压缩；
   5. 减少http请求数，将多个css、js文件合并。

2. 使用CDN节点进行外部资源加速。

3. 图片优化

   1. 使用字体图标代替图片图标
   2. 图片使用CSS雪碧图
   3. 图片懒加载
   4. 响应式图片。根据屏幕大小自动加载合适的图片
   5. 图片压缩

4. 减少重绘和回流

   1. 元素位置移动变换时尽量使用transform
   2. 用opacity来代替visibility（opacity配合图层使用，既不触发重绘也不触发重排）
   3. 将多次改变样式属性的操作合并成一次操作。（预先定义好class，然后修改DOM的className）
   4. 将DOM离线后再修改（先隐藏它，操作完成后再显示，这样只在隐藏和显示时触发2次重排）
   5. 利用文档碎片。（documentFragment）
   6. 动画实现过程中，启用GPU硬件加速:transform: tranlateZ(0)。
   7. 使用requestAnimationFrame(cb) （请求动画帧：回调函数会在浏览器下一次重绘之前调用。）

5. 使用事件委托。（利用事件冒泡，可以管理某一类型的所有事件，可以节省内存）

6. 强缓存

   1. Expires
   2. cache-control: max-age = number

7. 协商缓存

   1. Last-Modified/If-Modified-Since
   2. Etag/If-None-Match

8. Storage

9. 资源预加载

   1. prefetch 是利用浏览器的空闲时间，加载页面将来可能用到的资源的一种机制；通常可以用于加载其他页面（非首页）所需要的资源，以便加快后续页面的打开速度
   2. 在后台预加载具有高优先级的资源，对于在几秒钟内预加载您需要的资源非常有用

10. webpack打包优化

11. **alias**：起别名，减少查找过程

12. 后缀尝试列表要尽可能的小，导入文件时尽可能的带上后缀，避免寻找过程（extensions）

13. include 缩小打包范围

14. Gzip 对文件进行压缩，能大大提高首屏加载速度

15. 总体优化

    1. 异步加载或按需加载
    2. 路由懒加载（实现：ES6动态加载模块import() ）
    3. 服务端渲染。提高首屏加载速度。

16. DNS预解析。 适用于网页引用了大量其他域名的资源

17. Web Worker

    1. 作用就是为 JavaScript 创造多线程环境，将一些任务在后台运行。
    2. Worker 线程完成计算任务，再把结果返回给主线程。
    3. 好处是一些计算密集型或高延迟的任务，被 Worker 线程负担了，主线程（通常负责 UI 交互）就会很流畅，不会被阻塞或拖慢。