你应该要知道的重绘与重排

前言

现代web框架大多都是数据驱动类的，比如 react, vue，所以开发者不需要直接接触 DOM，修改 data 便可以驱动界面更新。但是作为前端工程师，了解浏览器的重绘与重排还是很有必要的，可以帮助我们写出更好性能的 web 应用。

浏览器的渲染

CSS Tree: 浏览器将 CSS 解析成 CSSOM 的树形结构
DOM Tree：浏览器将 HTML 解析成树形的数据结构
Render Tree：将 DOM 与 CSSOM 合并成一个渲染树

有了渲染树（Render Tree）,浏览器就知道网页中有哪些节点，以及各个节点与 CSS 的关系，从而知道每个节点的位置和几何属性，然后绘制页面。

重绘与重排

当 DOM 的变化影响了元素的几何属性（比如 width 和 height ）,就会导致浏览器重新计算元素的几何属性，同样受到该元素影响的其他元素也会发生重新计算。此时，浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树。这个过程被称为重排(也叫“回流”)（reflow），完成重排之后，浏览器会重新绘制受影响的部分到页面上，这个过程就是重绘（repaint）。
所以重排一定会引起重绘，而重绘不一定会引起重排，比如一个元素的改变并没有影响布局的改变（background-color的改变），在这种情况下，只会发生一个重绘（不需要重排）。

引起重排的因素

可以总结出，当元素的几何属性或页面布局发生改变就会引起重排，比如：

对可见 DOM 元素的操作（添加，删除或顺序变化）
元素位置发生改变
元素的几何属性发生改变（比如：外边距、内边距、边框宽度以及内容改变引起的宽高的改变）
页面首次渲染
伪类样式激活（hover等）
浏览器视口尺寸发生改变（滚动或缩放）

链接：https://juejin.im/post/5c0c7f28f265da612e2875de
来源：掘金