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

Question

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

While the DOM tree is being constructed, the browser constructs another tree, the render tree. This tree is of visual elements in the order in which they will be displayed. It is the visual representation of the document. Render tree does not contain display:none, position absolute elements, HEAD.

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

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

Answer 1

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

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

根据 Google 开发人员的说法，display: none 将不会呈现。但没有迹象表明 position:absolute 也不会渲染。

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

A few salient points from the article:

• The CSSOM and DOM trees are combined into a render tree, which is then used to compute the layout of each visible element and serves as an input to the paint process which renders the pixels to screen. (emphasis mine)

• The DOM and CSSOM trees are combined to form the render tree. Render tree contains only the nodes required to render the page.

• The first step is for the browser to combine the DOM and CSSOM into a “render tree” that captures all the visible DOM content on the page, plus all the CSSOM style information for each node. (emphasis mine)

• To construct the render tree, the browser roughly does the following:

  • Starting at the root of the DOM tree, traverse each visible node.

    • Some nodes are not visible at all (e.g. script tags, meta tags, and so on), and are omitted since they are not reflected in the rendered output.

    • Some nodes are hidden via CSS and are also omitted from the render tree - e.g. the span node in example above is missing from the render tree because we have an explicit rule that sets display: none property on it.

  • For each visible node find the appropriate matching CSSOM rules and apply them.

  • Emit visible nodes with content and their computed styles.

• The final output is a render that contains both the content and the style information of all the visible content on the screen. (emphasis mine)

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