浅谈重绘，回流（重排）

html 加载时发生了什么

在页面加载时，浏览器把获取到的HTML代码解析成1个DOM树，DOM树里包含了所有HTML标签，包括display:none隐藏，还有用JS动态添加的元素等。
浏览器把所有样式(用户定义的CSS和用户代理)解析成样式结构体
DOM Tree 和样式结构体组合后构建render tree, render tree类似于DOM tree，但区别很大，因为render tree能识别样式，render tree中每个NODE都有自己的style，而且render tree不包含隐藏的节点(比如display:none的节点，还有head节点)，因为这些节点不会用于呈现，而且不会影响呈现的，所以就不会包含到 render tree中。我自己简单的理解就是DOM Tree和我们写的CSS结合在一起之后，渲染出了render tree。

什么是回流

当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候，这时候是一定会发生回流的，因为要构建render tree。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。

什么是重绘

当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。

区别：

他们的区别很大：
回流必将引起重绘，而重绘不一定会引起回流。比如：只有颜色改变的时候就只会发生重绘而不会引起回流
当页面布局和几何属性改变时就需要回流
比如：添加或者删除可见的DOM元素，元素位置改变，元素尺寸改变——边距、填充、边框、宽度和高度，内容改变

页面的回流和重绘会影响JavaScript性能，如果你的html很大很复杂，页面的回流和重绘是一个非常值得关注的点。

页面的呈现流程

在讨论回流和重绘之前需要对页面的呈现流程有一定的了解，下面我们讨论一下浏览器是怎样将html结合css对页面进行呈现的。

1. 浏览器将获取到的html文档解析成一个Dom树，html中的每个元素都是Dom树中的一个节点，根节点就是document。Dom树中包含所有的html标签，包括display:none，以及js动态添加的元素。

2. 浏览器将所有的CSS解析成样式结构，在解析过程中去掉浏览器不能识别的样式，比如IE去掉-moz-等开头的样式，Firefox去掉_等开头的样式。

3. 浏览器将Dom树和CSS的样式结构体组合后生成Render Tree。Render Tree类似于Dom Tree，但有很大的区别。Render Tree能够识别样式，每个节点都有自己的样式，并且不包含隐藏节点（例如display:none和head等），但是visibility:hidden会包含在Render Tree中，因为visibility:hidden会影响页面的布局，会占空间。

4. Render Tree 构建完成之后，浏览器根据Render Tree开始绘制页面。

回流和重绘

回流：当Render Tree中的元素因为布局、尺寸、隐藏等改变需要重新构建，就称为回流。每个页面至少回流一次，就是在页面一次加载的时候。完成回流后，浏览器会重新绘制受影响的部分到屏幕中。 

重绘：在页面中的元素需要更新一些背景等影响外观的样式，而不绘影响布局的属性时，就称为重绘。

注意：回流必将引起重绘，而重绘不一定会引起回流。

回流的原因

1. Dom操作；

2. 调整窗口大小；

3. 元素位置或尺寸改变——边距、填充、边框、宽度和高度；

4. 字体大小改变；

5. 页面渲染的初始化；

6. 元素内容变化，尤其是输入控件；

7.请求了getComputedStyle(), 或者 IE的 currentStyle，或offsetWidth, width, clientWidth, scrollTop/scrollHeight的计算。

var s = document.body.style;s.padding = "2px"; // 回流+重绘

s.border = "1px solid red"; // 再一次 回流+重绘

s.color = "blue"; // 再一次重绘

s.backgroundColor = "#ccc"; // 再一次 重绘

s.fontSize = "14px"; // 再一次 回流+重绘

//添加node，再一次 回流+重绘document.body.appendChild(document.createTextNode('abc!'));

减少回流、重绘

1. 避免逐项改变样式，最好一次性改变样式属性。或者将样式定义成class进行一次性修改。

2. 避免直接操作Dom，创建一个documentFragment或div，在它上面进行Dom操作，只引发一到俩次回流和重绘。也可以使用cloneNode(true or false) 和 replaceChild 技术，只引发一次回流和重绘。

3. 避免循环读取offsetTop等属性。

4. 绝对定位具有复杂动画的元素。绝对定位使它脱离文档刘，否则会引起父元素及后续元素大量的回流。

浏览器的优化

回流会增加很多的开销，如果每句Js都进行一次回流和重绘的话，浏览器会受不了，所以很多浏览器都会优化这些操作。浏览器会维护一个队列，所有的回流和重绘放入到这个队列中，等队列到达一定的数量或到一定的时间间隔，浏览器就会flush队列，将队列中的操作进行一次批处理，这样就将一个多次回流和重绘合并成了一次。

虽然有了浏览器的优化，但有时候我们写的一些代码可能会强制浏览器提前flush队列，这样浏览器的优化可能就起不到作用了。当你请求向浏览器请求一些 style信息的时候，就会让浏览器flush队列，比如：

1. offsetTop, offsetLeft, offsetWidth, offsetHeight

2. scrollTop/Left/Width/Height

3. clientTop/Left/Width/Height

4. width,height

5. 请求了getComputedStyle(), 或者 IE的 currentStyle

当你请求上面的一些属性的时候，浏览器为了给你最精确的值，需要flush队列，因为队列中可能会有影响到这些值的操作。即使你获取元素的布局和样式信息跟最近发生或改变的布局信息无关，浏览器都会强行刷新渲染队列。

作者：你滴止痛药儿
链接：https://www.jianshu.com/p/e081f9aa03fb

作者：bingshuihe
链接：https://www.jianshu.com/p/62b63e1fa690
来源：简书