重绘和重排

参考

浏览器渲染机制

• 浏览器采用流式布局模型（Flow Based Layout）。

• 浏览器会把 HTML 解析成 DOM，把CSS 解析成 CSSOM，DOM和CSSOM合并就产生了渲染树。

• 有了RenderTree，我们就知道了所有节点的样式，然后计算他们在页面上的大小和位置，最后把节点绘制到页面上。

• 由于浏览器使用 流式布局，对 RanderTree 的计算通常只需要遍历一遍就可以完成，但是 table 及其内部元素除外，它们可能需要计算多次，通常要花三倍同等元素的事件，这也是为什么要避免使用 table 布局的原因之一。

重绘和重排

网页生成过程中，至少会渲染一次，随着用户的访问、操作，会不断重新渲染。

以下三种情况会导致网页重新渲染：

1. 修改 DOM

2. 修改样式表

3. 用户事件：如 鼠标悬停、页面滚动、输入框键入文字、改变窗口大小等等。

重新渲染，就需要重新生成布局和重新绘制。前者叫做“重排”、后者叫做“重绘”。

重绘不一定重排，重排一定会导致重绘

网页的性能

提高网页性能，就是要降低 “重排” 和 “重绘” 的频率，尽量少触发重新渲染。

一般来说：

• 样式表越简单，重排和重绘就越快；

• 重排和重绘的 DOM 元素级别越高，重绘成本就越高；

• table 元素的重排和重绘成本，要高于 div元素。

样式的写操作之后，如果有下面这些属性的读操作，都会引发浏览器立刻重新渲染。

• offsetTop/offsetLeft/offsetWidth/offsetHeight

• scrollTop/scrollLeft/scrollWidth/scrollHeight

• clientTop/clientLeft/clientWidth/clientHeight

• getComputedStyle()

从性能的角度考虑，不要吧读写操作写在一个语句中：

// bad
div.style.left = div.offsetLeft + 10 + "px";
div.style.top = div.offsetTop + 10 + "px";

// good
var left = div.offsetLeft;
var top  = div.offsetTop;
div.style.left = left + 10 + "px";
div.style.top = top + 10 + "px";

关于重绘和重排优化的建议

1. DOM 的多个读操作要放在一起：读写操作杂糅在一起会引发多次重排，降低性能。

2. 如果某个样式是通过重排得到的，那么最好缓存结果，避免下一次用到的时候再次重排。

3. 通过改变 class 或者 csstext 一次性改变样式，而不是一条一条改变元素样式。

4. 使用 Document Fragment对象，代替实际操作的 Dom树上的对象。

5. 将元素设置为 display: none（需要一次重排和重绘），然后对这个节点进行100次操作，最后再回复显示（需要一次重排和重绘）。这样一来，就能用两次重新渲染代替 100 次操作导致的重新渲染。

6. position 属性位 absolute 和 fixed 的元素，重排的开销会比较小，因为它的层级决定了它对其他元素的影响。

7. 只在必要的时候，才将元素的display属性为可见，因为不可见的元素不影响重排和重绘。另外，visibility : hidden的元素只对重绘有影响，不影响重排。

8. 使用虚拟 DOM 脚本库比如 React等。

9. 使用 window.requestAnimationFrame()、window.requestIdleCallback() 这两个方法调节重新渲染。