注：回流也叫重排，叫回流是为了和重绘从字眼上更好区分。也许是自己笨，关于浏览器渲染和重绘回流的文章几个月来看了几十篇，竟然到现在才真正理解。而理解靠的竟然是运气????浏览器渲染过程如下（节选自阮一峰老师的文章，链接，有改动）
HTML代码转化成DOM Tree
CSS代码转化成CSSOM Tree（CSS Object Model）
结合DOM和CSSOM，生成一棵渲染树Render Tree
生成布局（flow），将所有渲染树进行平面合成（！此步骤再次触发即回流）
将布局绘制（paint）在屏幕上（！此步骤再次触发即重绘）
注意，所谓的回流和重绘其实就是上面第四、第五步。此前也不止一次看过阮老师的这篇文章，却每次都没有把重绘和回流和第四第五步联想起来，今天回顾的时候，偶然发现这两步正好对应了回流和重绘，看来是我看文章不够仔细认真。到这里就真正理解了重绘和回流了，还有一点是我一直纠结是不是只要触发了局部回流，整个页面都会重新排版，今天仔细看了好几篇文章，终于确定并不是这样。阮老师也说:
重排和重绘的DOM元素层级越高，成本就越高。
所以回流肯定也是哪块的布局改变了重排哪里，而不是每次整个页面都重排。
发表回复