渲染树

定义

渲染树（Render Tree）是浏览器渲染流程中的中间数据结构，由 DOM 树与 CSSOM 树合并生成，每个节点（常称渲染对象或 LayoutObject）携带对应元素的计算样式与几何信息。

构建规则

• 从 DOM 根节点开始遍历，跳过不可见节点：script、meta 等非视觉标签，以及 display: none 的元素不会进入渲染树；
• visibility: hidden 的元素仍占据布局空间，因此会保留在树中；
• 伪元素（如 ::before）不存在于 DOM，却会作为节点出现在渲染树中；
• 匿名盒会被补充以满足盒模型的嵌套规则。

后续流程

渲染树生成后进入布局（Layout）阶段计算各节点的精确位置与尺寸，再经绘制（Paint）与合成（Composite）输出到屏幕。

意义

渲染树解释了许多现象的本质区别，例如 display: none 触发回流而 visibility: hidden 只触发重绘，是理解浏览器渲染原理的关键概念。