前端性能优化整理

0. 浏览器渲染原理：

1. 输入网址  -> dns查询 -> dns缓存 -> 三次握手建立连接 -> 浏览器发送请求到服务器 -> 服务器返回html -> 浏览器渲染页面； 
2. 浏览器渲染过程（webkit为例）：
   ① 首先进行dom解析，css解析，构建dom树；（display:none的元素在dom树）
   ② css解析完成css rules加到dom树上，生成render tree（回流reflow阶段，应尽量避免）；（display:none的元素不在dom树）
   ③ 经过层叠上下文处理，生成render layer（重绘repaint阶段），可以直接去paint页面，或者去④；
   ④ 层合并后生成graphics layer，然后GPU绘制。

1. 浏览器宿主环境层面：

1. 由于单线程解析阻塞限制，可以用script defer属性异步加载，样式放头部，脚本放底部；
2. 结合dns-prefetch、dns-preload、preload预加载资源；
3. 利用事件冒泡机制，采用事件委托方法绑定事件；
4. 浏览器渲染时，开启硬件加速可以生成复合层，复合层交给GPU渲染，但不能滥用；

2. 网络层面：

1. 减少http请求数量：css、js合并，css sprites，font-icon，base64编码图片，图片懒加载；
2. 减轻http数据请求大小：静态资源压缩，tinypng压缩图片，webp格式，gzip压缩；
3. 对于cookie性能bug，静态资源分开部署，cdn缓存；
4. 缓存处理（强缓存，协商缓存），本地缓存；
5. dns-prefetch，preload；
6. 反向代理，cdn，负载均衡；

3. 代码层面：

1. 利用requestAnimationFrame做持续动画；
2. 缓存dom，优化循环体；
3. 减少重绘，回流，样式层面进行层提升；
4. 闭包使用，内存回收；
5. 代码复用;
6. 递归时采用尾调用自身即尾递归，永远不会发生栈溢出；

7. 硬件加速时添加z-index，人为干扰复合层的排序，有效减少chrome创建不必要的复合层。

     

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有