新手推荐，前端性能优化小整理，效率加倍

1、 浏览器渲染原理：

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绘制。

2、 浏览器宿主环境层面：

1.因为单线程解析阻塞限制，能够用script defer属性异步加载，样式放头部，脚本放底部；

2.结合dns-prefetch、dns-preload、preload预加载资源；

3.利用事件冒泡机制，采用事件委托方法绑定事件；

4.浏览器渲染时，开启硬件加速能够生成复合层，复合层交给GPU渲染，但不能滥用；

3、 网络层面：

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，负载均衡；

作为一名前端程序员，有一个学习的氛围跟一个交流圈子特别重要。这是个人一个前端学习交流群 330336289（邀请码：寂静），想学习交流前端，打算深刻了解这个行业的朋友，无论你是小白仍是大牛都欢迎加入，你们一块儿交流学习。

4、 代码层面：

1.利用requestAnimationFrame作持续动画；

2.缓存dom，优化循环体；

3.减小重绘，回流，样式层面进行层提高；

4.闭包使用，内存回收；

5.代码复用;

6.递归时采用尾调用自身即尾递归，永远不会发生栈溢出；

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