性能优化之reflow和repaint

本文主要介绍一下什么是reflow,repaint, 怎样避免它们形成的不良影响, 怎么经过工具查看分析它们.　　

一.首先对浏览器渲染引擎下网页呈现过程简要说一下:

1. 浏览器的渲染引擎开始解析html构建成DOM树，DOM树是以document对象为根节点，包含全部的html标签， 包括display： none隐藏的，也包括js动态添加的元素。
2. 解析html的同时， 将css文件或者样式元素中的样式解析成CSS Rule Tree，解析时会去掉浏览器不能识别的样式。
3. 根据DOM树和CSSOM来构造Rendering Trre。Rendering Trre和DOM Tree相比较，Rendering Trre中每一个节点都包含样式信息，并且Render Tree不会包含隐藏的节点，只有影响到呈现的节点才会包含在Render Tree中（例如： display：none的节点，head节点不会包含在Render Tree中，visibility：hidden会被包含，由于它会影响layout）。
4. 生成布局（layout），计算各节点元素在屏幕上所在位置和几何结构。
5. 绘制（paint），将布局绘制到屏幕上。

　　以上5步中，主要耗时的是后2步，后两步合称为渲染（render）。

二: 什么是reflow 和 repaint：

　　网页在生成的过程当中，至少要渲染一次。以后在访问过程当中，还会不断的进行渲染。从新渲染就行从新生成布局和绘制（也就是重复进行上面的第4，5步）从新生成布局的过程就是reflow（回流，重排），从新绘制就叫作reflow（重绘）。

三: 何时触发reflow和repaint

注： repaint不必定须要reflow，例如：改变某元素的颜色，只会触发repaint，不会触发reflow。可是reflow必定会致使repaint，由于布局改变了，就必定须要从新绘制。
Reflow 的成本比 Repaint 的成本高不少。DOM Tree里的每一个节点都会有reflow方法，一个结点的reflow可能致使其子结点，甚至父点以及同级结点的 reflow。在PC端或许还没什么，可是在手机上，仍是比较耗性能和耗电的。
如下状况会致使reflow：

1. 增长货移除css样式
2. 改变字体大小
3. 改变窗口大小
4. 操做class属性
5. 激活css伪类
6. 内容变化，如在input内输入文字
7. js操做DOM
8. 获取offsetTop, offsetLeft等layout属性
9. 设置css属性等值

　　　... ...

四.如何减少reflow的影响:

1. 减小没必要要的DOM层级.
2. 避免使用table进行布局,由于可能很小的一个小改动会形成整个 table 的从新布局。
3. 尽可能经过position属性为absolute或fixed实现动画效果
4. 不要一条一条地修改 DOM 的样式。而是预先定义好对应的 class，而后修改对应节点的 className
5. 不要逐条操做DOM节点：    a> 使用 documentFragment 对象在内存里操做 DOM。　　b> 先把 DOM 给 display:none (有一次 repaint)，作完全部的修改后,再把他显示出来。　　c> clone 一个 DOM 节点到内存里，作完全部的修改后，再交换一下。
6. 请求以下值offsetTop, offsetLeft, offsetWidth, offsetHeight，scrollTop/Left/Width/Height，clientTop/Left/Width/Height，浏览器会发生reflow，建议将他们合并到一块儿操做，能够减小回流的次数。屡次要用到值,能够先用变量缓存起来.

　　... ...

五.开发者工具查看

　　Chrome浏览器开发者工具的Performance面板,能够查看页面回流和重绘所花费的时间.
　　打开f12下的开发者工具, 切换到Performance面板.以下图:

　　

　　点击开始录制按钮,会开始录制,这时在网页上进行一些操做, 而后点击中止按钮,以下:

　　

　　从图中能够判断出性能问题到底出如今哪一个环节,是js的执行,仍是渲染

　　图中不一样颜色表明不一样的事件, 哪一个色块越大, 说明耗时越长,问题越大.能够根据此去进行优化.

• 黄色: javaScript执行时间
• 紫色: 样式从新计算和布局, 即reflow时间
• 绿色: repaint时间　

 如何对线上项目进行性能监控