前端性能优化汇总

性能优化的点是很多面试会问到的问题，这里针对性能优化的点来做一下总结。

减少HTTP请求次数和请求的大小

1. 文件合并压缩
2. 雪碧图 (精灵图)css sprite
   解析：将多个图标文件整合到一张图片中
3. 尽量使用字体图标（iconfont生成）
4. 音视频取消预加载（播放的时候再加载，preload属性）
5. 图片base64（可用webpack打包设定最小img体系转换成base64）
6. 在客户端和服务器端进行信息交互的时候，对于多项数据我们尽可能基于JSON格式来进行传送（JSON格式的数据处理方便，资源偏小）
7. 开启服务器端的gzip压缩
8. 列表图片懒加载
9. 骨架屏方案点击访问

建立缓存机制

1. DNS缓存
2. 数据缓存（例如：本地存储）
3. 强缓存 和 协商缓存（304）
   解析：服务器设置资源过期时间，200 / 304
4. 离线存储
   解析：个人认为没啥用，平时用的也少。
5. 做CDN加速
   解析：CDN 的原理是尽可能的在各个地方分布机房缓存数据，这样即使我们的根服务器远在国外，在国内的用户也可以通过国内的机房迅速加载资源。
   因此，我们可以将静态资源尽量使用 CDN 加载，由于浏览器对于单个域名有并发请求上限，可以考虑使用多个 CDN 域名。并且对于 CDN 加载静态资源需要注意 CDN 域名要与主站不同，否则每次请求都会带上主站的 Cookie，平白消耗流量。
6. 大数据列表可使用虚拟滚动方案
7. DNS 解析也是需要时间的，可以通过预解析的方式来预先获得域名所对应的 IP。设置DNS预解析，如下

< link  rel="dns-prefetch" href="//www.xxx.com">

代码上的优化

1. 减少DOM的重绘和回流
2. 在JS中尽量减少闭包的使用
3. 在JS中避免“嵌套循环”和“死循环”
4. 尽可能使用事件委托
5. 尽量减少CSS表达式的使用(expression)
6. CSS选择器解析规则是从右向左解析
7. 页面中的数据获取采用异步编程和延迟分批加载
8. 尽可能实现JS的封装（低耦合高内聚），减少页面中的冗余代码
9. 尽量减少对于filter滤镜属性的使用
10. 在CSS导入的时候尽量减少使用@import导入式
11. 使用window.requestAnimationFrame（JS中的帧动画）代替传统的定时器动画
12. 减少递归的使用，避免死递归，避免由于递归导致的栈内存嵌套
13. 基于SCRIPT调取JS的时候，可已使用 defer或者async 来异步加载
14. 避免使用with语句
15. 使用防抖或者节流

• 假设有一个按钮点击会触发网络请求，但是我们并不希望每次点击都发起网络请求，而是当用户点击按钮一段时间后没有再次点击的情况才去发起网络请求，对于这种情况我们就可以使用防抖。
• 假如一个滚动事件中会发起网络请求，但是我们并不希望用户在滚动过程中一直发起请求，而是隔一段时间发起一次，对于这种情况我们就可以使用节流。

webpack上的性能优化

减少 Webpack 打包时间

1. 优化 Loader
2. HappyPack
   解析：受限于 Node 是单线程运行的，所以 Webpack 在打包的过程中也是单线程的，特别是在执行 Loader 的时候，长时间编译的任务很多，这样就会导致等待的情况。
   HappyPack 可以将 Loader 的同步执行转换为并行的，这样就能充分利用系统资源来加快打包效率了。
3. DllPlugin
   解析：DllPlugin 可以将特定的类库提前打包然后引入。这种方式可以极大的减少打包类库的次数，只有当类库更新版本才有需要重新打包，并且也实现了将公共代码抽离成单独文件的优化方案。
4. 代码压缩（webpack4 mode 设置成 production 自动开启）

减少 Webpack 打包后的文件体积

1. 按需加载
2. Scope Hoisting
   解析：Scope Hoisting 会分析出模块之间的依赖关系，尽可能的把打包出来的模块合并到一个函数中去。
3. Tree Shaking（webpack4自动开启）
   解析：Tree Shaking 可以实现删除项目中未被引用的代码。