真正理解重绘和回流

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

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

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

重排和重绘的DOM元素层级越高，成本就越高。

所以回流肯定也是哪块的布局改变了重排哪里，而不是每次整个页面都重排。