为什么渲染树不包含绝对定位的元素？答案

【问题标题】：Why doesn't the render tree contain absolutely positioned elements?为什么渲染树不包含绝对定位的元素？
【发布时间】：2016-03-21 16:59:32
【问题描述】：

我正在阅读有关渲染树的内容：

在构建 DOM 树时，浏览器会构建另一棵树，渲染树。这棵树是它们的显示顺序。它是视觉表示的文件。 渲染树不包含display:none，定位绝对元素，HEAD。

最后一句话让我有点困惑。渲染树包含可见元素。所以，它应该包含绝对位置。浏览器如何渲染这些元素（display:none，定位绝对元素，HEAD）？谁能详细解释一下？

http://taligarsiel.com/Projects/howbrowserswork1.htm

【问题讨论】：

它们不存在还是不可见/位于您意想不到的地方。
display: none; 元素不会被渲染。 position: absolute 元素独立于树的其余部分定位，因此可能被放入自己的树中并在顶部绘制。 <head> 包含不被渲染的元数据。
@Rooster 它说，渲染树包含可见元素。所以，它应该包含绝对位置
您有该信息的链接参考吗？只是想看看他们是否详细说明了这一点。
@Michael_B 我想，你是对的。对于最后一行（绝对位置），我没有参考。我很久以前读过它。

标签： javascript html css google-chrome browser

【解决方案1】：

我不确定您在哪里阅读该信息，但 position: absolute 元素已（显然）呈现。

有两种树：DOM 和 CSSOM。两者结合起来生成构建我们看到的页面的渲染树。

根据 Google Developers，display: none 不会呈现。但没有迹象表明position: absolute 也不会渲染。

Google Developers - Render-tree construction, layout, and paint

文章的几个要点：

CSSOM 和 DOM 树组合成一个渲染树，然后用于计算每个可见元素的布局，并用作将像素渲染到屏幕的绘制过程的输入。 （强调我的）

DOM 和 CSSOM 树组合在一起形成渲染树。渲染树仅包含渲染页面所需的节点。

第一步是让浏览器将 DOM 和 CSSOM 组合成一个“渲染树”，捕获页面上所有可见的 DOM 内容，加上每个节点的所有 CSSOM 样式信息。 （强调我的）

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

从 DOM 树的根开始，遍历每个可见节点。

有些节点根本不可见（例如脚本标签、元标签等），因为它们没有反映在渲染输出。

某些节点通过 CSS 隐藏，并且在渲染树中也被省略 - 例如上面示例中的 span 节点在渲染树，因为我们有一个明确的规则来设置display: none 财产。

为每个可见节点找到适当的匹配 CSSOM 规则并应用它们。

使用内容及其计算样式发出可见节点。

最终输出是一个渲染，其中包含屏幕上所有可见内容的内容和样式信息。 （强调我的） )

在此处阅读全文：Render-tree construction, layout, and paint

【讨论】：