渲染树构建、布局及绘制

from:https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction?hl=zh-cn

• DOM 树与 CSSOM 树融合成渲染树。
• 渲染树只包括渲染页面需要的节点。
• 布局计算每个对象的精确位置及尺寸。
• 最后一步的绘制，输入确定的渲染树，在屏幕上渲染像素。

构建渲染树

为了构建渲染树，浏览器大致做了如下：

• 从 DOM 树的根节点开始，遍历每个可见的节点。
• 某些节点完全不可见（例如 script 标签、meta 标签等），因为它们不会在渲染结果中反映，所以会被忽略。
• 某些节点通过 CSS 隐藏，因此在渲染树中也会被忽略。比方说，上面例子中的 span 节点，因为该节点有一条显式规则设置了 display:none 属性，所以不会出现在渲染树中。
• 给每个可见节点找到相应匹配的 CSSOM 规则，并应用这些规则。
• 发射可见节点，连