回流与重绘

什么是回流？

当我们对 DOM 的修改引发了 DOM 几何尺寸的变化（比如修改元素的宽、高或隐藏元素等）时，浏览器需要重新计算元素的几何属性（其他元素的几何属性和位置也会因此受到影响），然后再将计算的结果绘制出来。这个过程就是回流。

由本身的大小宽高改变，引发 局部 或 全局 的排版，会引发回流或局部回流

• 全局范围：从根节点 html 开始对整个渲染树进行重新布局。
• 局部范围：对渲染树的某部分或某一个渲染对象进行重新布局

什么是重绘？

当我们对 DOM 的修改导致了样式的变化、却并未影响其几何属性（比如修改了颜色或背景色）时，浏览器不需重新计算元素的几何属性、直接为该元素绘制新的样式。这个过程叫做重绘。只改变外观，不影响布局，会引发重绘。

浏览器渲染

 从上面这个图上，我们可以看到，浏览器渲染流程如下： 

• 解析 HTML Source，生成 DOM 树。
• 解析 CSS，生成 CSSOM 树。
• 将 DOM 树和 CSSOM 树结合，去除不可见元素(ps)，生成渲染树。
• Layout (布局)：根据生成的渲染树，进行布局，得到节点的几何信息(宽度、高度和位置等)。
• Painting (重绘):根据渲染树以及回流得到的几何信息，将 Render Tree 的每个像素渲染到屏幕上。

渲染树：

构建渲染树流程：

• 从 DOM 树的根节点开始遍历每个可见节点。
• 对于每个可见的节点，找到 CSSOM 树中对应的规则，并应用它们。
• 根据每个可见节点以及其对应的样式，组合生成渲染树

什么是不可见节点

• 一些不会渲染输出的节点，比如 script、meta、link 等。
• 一些通过 css 进行隐藏的节点。比如 display : none。注意，使用 visibility 和 opacity 隐藏的节点，还是会显示在渲染树上的（因为还占据文档空间），只有 display : none 的节点才不会显示在渲染树上。

 css 加载是否会阻塞 dom 树渲染

• 一个就是 DOM 树的解析
• 一个就是构建渲染树【render 树】