Yogesh Yogesh - 4 years ago 172
Javascript Question

Why doesn't the render tree contain absolutely positioned elements?

I was reading about render tree:

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
position absolute elements, HEAD.

The last statement is little confusing for me. Render tree contain visible elements. so, it should contain position absolute How does browser renders these elements (
, position absolute elements, HEAD). Can someone explain in more detail?


Answer Source

I'm not sure where you are reading that information, but position: absolute elements are (obviously) rendered.

There are two trees: DOM and CSSOM. Both combine to generate the render tree that builds the page that we see.

According to Google Developers, display: none will not render. But there is no indication that position: absolute will not render, as well.

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)

Read the full article here: Render-tree construction, layout, and paint

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download