前端性能优化14点

什么是前端性能优化？
前端优化的方法有很多种，可以将其分为两大类，第一类是页面级别的优化；第二类为代码级别的优化。

为什么要进行前端优化？

优化的目的在于提升速度，优化体验，节省资源。

正常预览页面经历哪些阶段？
输入网址——>DNS解析获取IP址——>TCP握手建立连接——>浏览器发起请求——>服务器响应——>浏览器接受数据——>浏览器处理元素——>浏览器布局渲染

页面级别优化

1. 减少http请求数（合理的设置http缓存，CSS Sprites，通过合并 CSS图片）；
2. 静态资源使用 CDN
3. 资源合并与压缩，尽可能的将外部的脚本，多个合为一个
4. 响应式图片：响应式图片的优点是浏览器能够根据屏幕大小自动加载合适的图片。
5. 降低图片质量

代码级优化：

1. 图片延迟加载：在页面中，先不给图片设置路径，只有当图片出现在浏览器的可视区域时，才去加载真正的图片，这就是延迟加载。
2. 尽可能利用 CSS3 效果代替图片
3. 通过 webpack 按需加载代码，提取第三库代码，减少 ES6 转为 ES5 的冗余代码
4. 减少对DOM操作，主要是减少DOM的重绘与回流（重排）：当改变 DOM 元素位置或大小时，会导致浏览器重新生成渲染树，这个过程叫重排。当重新生成渲染树后，就要将渲染树每个节点绘制到屏幕，这个过程叫重绘。不是所有的动作都会导致重排，例如改变字体颜色，只会导致重绘。记住，重排会导致重绘，重绘不会导致重排 。
5. 使用事件委托：如绑定li事件，可以将事件挂在ul。
6. 使用位操作：位操作也比其他数学运算和布尔操作快得多如if (value % 2) { // 奇数 } else { // 偶数 } // 位操作 if (value & 1) { // 奇数 } else { // 偶数 }
7. 在js中尽量减少闭包的使用。原因：使用闭包后，闭包所在的上下文不会被释放。
8. 把css放在body上，把js放在body下面，让其先加载css。
9. 降低 CSS 选择器的复杂性