DOM树、CSS树和渲染树是浏览器解析和渲染网页的三个关键组成部分。下面我们将通过图文并茂的方式解释它们的规则和原理。

1. DOM树（Document Object Model Tree）

定义：DOM树是浏览器将HTML文档解析为一个树形结构，每个节点都是一个对象，代表了文档中的一个元素或文本片段。

构建过程：

- 浏览器读取HTML文档，将标签转换为DOM节点。

- 从``标签开始，递归地构建DOM树，直至所有标签都被解析。

特点：

- DOM树的根节点是`document`对象。

- 树中的每个节点都有属性和方法，可以被JavaScript访问和修改。

示例：

  +document
    +html
      +head
      +body
        +div
          +p
            "Hello, World!"

2. CSS树（CSS Object Model Tree）

定义：CSS树是浏览器解析CSS样式表，创建的样式规则树形结构。

构建过程：

- 浏览器解析CSS选择器和属性，创建CSS规则。

- 将CSS规则与DOM树中的相应节点关联。

特点：

- CSS树不是实际存在于DOM API中的树，而是浏览器内部构建的样式规则集合。

- 它决定了DOM树中每个节点的最终样式。

示例：

  +html
    -style: {}
  +body
    -style: { font-size: 16px; }
  +div
    -style: { width: 300px; height: 200px; }
  +p
    -style: { color: blue; }

3. 渲染树（Render Tree）

定义：渲染树是DOM树和CSS树的结合体，包含了页面中所有可见元素的子集，用于布局和绘制。

构建过程：

- 浏览器遍历DOM树，但忽略掉不可见的节点（如`head`标签或使用`display: none`的元素）。

- 应用CSS规则，为每个可见节点添加样式信息。

特点：

- 渲染树只包含需要显示在屏幕上的元素。

- 它决定了元素的几何属性（如大小和位置）。

示例：

  +html
    +body
      +div (width: 300px, height: 200px)
        +p (color: blue, font-size: 16px)
          "Hello, World!"

规则和原理

- 解析顺序：浏览器首先解析HTML构建DOM树，然后解析CSS构建CSS树，最后结合这两棵树生成渲染树。

- 性能优化：减少DOM和CSS树的复杂性可以提高渲染性能。例如，减少重排（回流）和重绘。

- 可见性：在渲染树中，只有具有可见样式的元素才会被考虑。浏览器会忽略如`visibility: hidden`或`opacity: 0`的元素。

- 层叠上下文：某些元素（如设置`position`的元素）可能形成新的层叠上下文，影响渲染树的构建。