乐趣区

真正理解重绘和回流

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

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

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

退出移动版