声明：此文是篇译文，原文请移步
Render-tree Construction, Layout, and Paint

CSSOM和DOM树构建成一个渲染树，用来计算每一个可见的元素并输入到渲染的像素屏幕上。对于实现最佳的渲染性能，优化这些步骤是至关重要的。
在上一节关于构建对象模型，我们构建了DOM和CSSOM树——基于HTML和CSS的输入，然而，这两个都是独立的对象，它们获取文档的不同内容：一个描述内容，另一个描述需要应用于文档的样式规则。那么我们如何合并这两个，让浏览器在屏幕上渲染像素呢？

  1. DOM和CSSOM树组成渲染树。
  2. 渲染树只包含需要渲染页面的节点。
  3. 页面布局计算了每个对象的确切位置和大小。
  4. 最后一步是绘制，这需要在最后的渲染树和渲染像素屏幕上完成。

首先，浏览器将DOM和CSSOM绘制成“渲染树“，获取页面上所有可见的DOM内容和每个节点CSSOM所有的样式信息。

为了构建呈现树，浏览器大致执行以下操作：

  1. 从DOM树的根节点开始，遍历每个可见节点。
  2. 有些节点是不可见的（例如，脚本标记、meta标记等），由于它们不反映在渲染输出中，因此被省略。
  3. 有些通过CSS隐藏节点也会被忽略，例如，在上面的例子中，span节点在渲染树中缺少了，因为我们有明确的规则，设置了display: none属性。
  4. 对于每个可见的节点，寻找合适的匹配CSSOM的规则并应用到他们身上。
  5. 通过内容及计算的样式显示可见节点。

注意：作为简短的旁白，请注意，visibility: hidden与display: none两者不同。前者使元素不可见，但元素在布局中仍然占据空间（也就是说，它呈现为空框），而后者则是从呈现树中完全移除元素，使元素不可见，而不是布局的一部分。

最终输出的是一个包含屏幕上所有可见元素的内容和样式信息的渲染。有了渲染树，我们就可以进入“布局”阶段。
到目前为止，我们已经计算出哪些节点应该是可见的和它们所计算出的样式，但是我们还没有在设备的视口中计算出它们的确切位置和大小——这就是“布局”阶段，也称为“回流”。
为了计算页面上每个对象的确切大小和位置，浏览器从呈现树的根元素开始遍历它。我们看一个简单的例子：

1
2
3
4
5
6
7
8
9
10
11
<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Critial Path: Hello world!</title>
  </head>
  <body>
    <div style="width: 50%">
      <div style="width: 50%">Hello world!</div>
    </div>
  </body>
</html>

上述页面包含两个嵌套的div：第一个（父）div将节点的显示大小设置为视口宽度的50%，而第二个div（被父节点包含）的宽度为其父元素的50%，即视口宽度的25%。

布局过程输出的是一个“盒模型”，它精确地获取到视口中每个元素的确切位置和大小：所有相对测量值都被转换为屏幕上的绝对像素。
最后，现在我们知道哪些节点是可见的，以及它们的计算样式和几何图形，我们可以将这些信息传递到最后一个阶段，它将渲染树中的每个节点转换为屏幕上的实际像素。这一步通常被称为“绘制”或“栅格化”。
这可能需要一些时间，因为浏览器需要做相当多的工作。然而，Chrome的DevTools可以提供一些方法描述上述的三个阶段。我们检查一下原来的“Hello World”示例的布局阶段：

  • “布局”事件获取了在时间轴中的渲染树的构造、位置和大小计算。
  • 当布局完成时，浏览器发出“绘制设置”和“绘制”事件，这些事件将渲染树转换为屏幕上的像素。

这个时间指的是执行渲染树的构建，布局和根据不同的文档的大小绘制，以及应用样式和它运行的设备：文档越大，浏览器需要做的工作越多；样式越复杂，绘制所耗费的时候越多（例如，实体颜色容易绘制的，而阴影是不易的由于计算和渲染）。

快速回顾一下浏览器的步骤：

  1. 解析 HTML 标签, 构建 DOM 树
  2. 解析 CSS 标签, 构建 CSSOM 树
  3. 把 DOM 和 CSSOM 组合成渲染树 (render tree)
  4. 在渲染树的基础上进行布局, 计算每个节点的几何结构
  5. 运行在渲染树中计算每个节点的几何布局。
  6. 把每个节点绘制到屏幕上 (painting)

我们的演示页面看起来简单，但它需要相当多的工作。如果DOM或CSSOM被修改，你必须要重复该过程，找出哪一个像素需要重新呈现在屏幕上。
优化渲染路过程的关键是上述过程中步骤1到步骤5总花费的时间最少。这样做使内容尽可能快地呈现在屏幕上，并且减少了初始渲染与屏幕更新之间的时间，也就是说，实现交互式内容更高的刷新率。