前端性能-重绘和重排（回流）

前言：

---

重绘和重排这两个词在面试过程中经常听到，也是老生长谈的话题，为啥它们就这么受我们关注呢，了解它对我们编写代码又有什么好处呢？这里就带大家一起学习下。

页面构建的过程：

---

1. HTML 被 HTML 解析器解析成 DOM 树；
2. CSS 被 CSS 解析器解析成 CSSOM 树；
3. 结合 DOM 树和 CSSOM 树，生成一棵渲染树(Render Tree)；
4. 生成布局(layout)，浏览器在屏幕上“画”出渲染树中的所有节点；
5. 将布局绘制(paint)在屏幕上，显示出整个页面。

Reflow （重排）：

当涉及到DOM节点的布局属性发生变化时，就会重新计算该属性，浏览器会重新描绘相应的元素，此过程叫回流（Reflow）。

Repaint（重绘）：

当影响DOM元素可见性的属性发生变化 (如 color) 时, 浏览器会重新描绘