真正理解重绘和回流

共计 495 个字符，预计需要花费 2 分钟才能阅读完成。

注：回流也叫重排，叫回流是为了和重绘从字眼上更好区分。也许是自己笨，关于浏览器渲染和重绘回流的文章几个月来看了几十篇，竟然到现在才真正理解。而理解靠的竟然是运气???? 浏览器渲染过程如下（节选自阮一峰老师的文章，链接，有改动）

HTML 代码转化成 DOM Tree
CSS 代码转化成 CSSOM Tree（CSS Object Model）
结合 DOM 和 CSSOM，生成一棵渲染树 Render Tree
生成布局（flow），将所有渲染树进行平面合成（！此步骤再次触发即回流）
将布局绘制（paint）在屏幕上（！此步骤再次触发即重绘）

注意，所谓的回流和重绘其实就是上面第四、第五步。此前也不止一次看过阮老师的这篇文章，却每次都没有把重绘和回流和第四第五步联想起来，今天回顾的时候，偶然发现这两步正好对应了回流和重绘，看来是我看文章不够仔细认真。到这里就真正理解了重绘和回流了，还有一点是我一直纠结是不是只要触发了局部回流，整个页面都会重新排版，今天仔细看了好几篇文章，终于确定并不是这样。阮老师也说:
重排和重绘的 DOM 元素层级越高，成本就越高。
所以回流肯定也是哪块的布局改变了重排哪里，而不是每次整个页面都重排。