回流与重绘_回流重绘画-优快云博客

关键渲染路径指的是浏览器接收最初的HTML，CSS，JS等资源后，解析，构建树，渲染布局，绘制，最后呈现给用户能看到的界面的这个过程。主要过程如下：

解析HTML生成DOM树
解析CSS生成CSSOM规则树（CSS Object Model）
将DOM树和CSSO规则树合并生成渲染树（rendering tree）
遍历渲染树开始布局，计算每个节点的位置大小等信息
将渲染树每个节点绘制到屏幕
上面的5个步骤并不是一次性执行完成，例如DOM或者CSSOM被修改时，就会有某个过程需要被重复执行，重新计算并重新渲染。实际上，由于JS跟css的操作会多次修改DOM跟CSSOM。

当浏览器收到HTML文档后，会遍历文档节点，生成DOM树。HTML Parser将HTML标记解析成DOM树。

CSS Parser将每个CSS文件都解析成一个样式表对象，每个对象都包含样式规则，也叫做CSSOM。

有了DOM树跟CSS规则树，浏览器就可以结合他们来构建渲染树了。浏览器会先从DOM树的根节点开始遍历每个可见节点，然后为每个可见节点找到适配的CSS样式规则并应用到DOM树上。

生成渲染树之后，还是没有办法直接渲染到屏幕上。因为这时候还不知道每一个节点的位置信息，这就需要布局（Layout）的处理了，这个过程其实就是根据渲染树中渲染对象的信息，计算出每一个渲染对象的位置跟尺寸，将渲染对象放在浏览器相应的位置上。

回流（reflow）：在render树中计算每个节点的大小和位置。当浏览器发现某个部分发生改变影响了布局，需要重新渲染。回流会从html的root frame开始递归往下，依次计算所有节点的尺寸跟位置。回流几乎是无法避免的，只要行为引起了页面上元素的占位方式，定位方式，边距等属性的变化，这都会引起内部，周围，甚至整个页面的重新渲染。
重绘（repaint）：根据回流得到的大小和位置在屏幕中重新绘制。当改变某个元素的背景颜色，文字颜色，边框颜色等不影响它内部以及周围布局的。屏幕的某一部分要重画，但是元素的尺寸位置都没有改变，这就是重绘。
回流一定会引起重绘，但重绘却不一定会引起回流
display:none会出发回流，位置发生了变化。而visibility:hidden只会触发重绘，位置没有变。
有些时候，修改了元素的尺寸或者颜色，浏览器不会立即回流或者重绘一次，而是会将这些操作积累下来，然后再做一次reflow，这叫做异步reflow。
浏览器也有立即进行回流的情况，例如resize窗口，改变页面默认字体等。