<commit_before>---
layout: article
title: "Render-tree construction, Layout, and Paint"
description: "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. Optimizing each of these steps is critical to achieve optimal rendering performance."
introduction: "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. Optimizing each of these steps is critical to achieve optimal rendering performance."
article:
  written_on: 2014-04-01
  updated_on: 2014-04-28
  order: 2
collection: critical-rendering-path
key-takeaways:
  render-tree-construction:
    - The DOM and CSSOM trees are combined to form the render tree
    - Render tree contains only the nodes required to render the page
    - Layout computes the exact position and size of each object
    - Paint is the last step that takes in the final render tree and renders the pixels to the screen
notes:
  hidden:
    - "As a brief aside, note that 'visibility: hidden' is different from 'display: none'. The former makes the element invisible, but the element is still occupies space in the layout (i.e. it's rendered as an empty box), whereas the latter (display: none) removes the element entirely from the render tree such that the element is invisible and is not part of layout."
---
{% wrap content%}

<style type="text/css">
  img, video, object {
    max-width: 100%;
  }

  img.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
</style>

<!-- {% include modules/toc.liquid %} -->

In the previous section on constructing the object model, we built the DOM and the CSSOM trees based on the HTML and CSS input. However, both of these are independent objects which capture different aspects of the document: one describes the content and the other the style rules that need to applied to the document. How do we merge the two and get the browser to render pixels on the screen?

{% include modules/takeaway.liquid list=page.key-takeaways.render-tree-construction %}

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.

<img src="images/render-tree-construction.png" alt="DOM and CSSOM are combined to create the render tree" class="center" />

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

1. Starting at the root of the DOM tree, traverse each visible node.<commit_msg>Fixes #80 - grammatical error in CRP<commit_after>---
layout: article
title: "Render-tree construction, Layout, and Paint"
description: "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. Optimizing each of these steps is critical to achieve optimal rendering performance."
introduction: "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. Optimizing each of these steps is critical to achieve optimal rendering performance."
article:
  written_on: 2014-04-01
  updated_on: 2014-04-28
  order: 2
collection: critical-rendering-path
key-takeaways:
  render-tree-construction:
    - The DOM and CSSOM trees are combined to form the render tree
    - Render tree contains only the nodes required to render the page
    - Layout computes the exact position and size of each object
    - Paint is the last step that takes in the final render tree and renders the pixels to the screen
notes:
  hidden:
    - "As a brief aside, note that 'visibility: hidden' is different from 'display: none'. The former makes the element invisible, but the element is still occupies space in the layout (i.e. it's rendered as an empty box), whereas the latter (display: none) removes the element entirely from the render tree such that the element is invisible and is not part of layout."
---
{% wrap content%}

<style type="text/css">
  img, video, object {
    max-width: 100%;
  }

  img.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
</style>

<!-- {% include modules/toc.liquid %} -->

In the previous section on constructing the object model, we built the DOM and the CSSOM trees based on the HTML and CSS input. However, both of these are independent objects which capture different aspects of the document: one describes the content and the other the style rules that need to be applied to the document. How do we merge the two and get the browser to render pixels on the screen?

{% include modules/takeaway.liquid list=page.key-takeaways.render-tree-construction %}

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.

<img src="images/render-tree-construction.png" alt="DOM and CSSOM are combined to create the render tree" class="center" />

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

1. Starting at the root of the DOM tree, traverse each visible node.
{'fraction_non_alphanumeric': 0.05890962312477131, 'fraction_numerical': 0.00804976216611782, 'mean_word_length': 4.010999083409716, 'pattern_counts': {'":': 0, '<': 11, '<?xml version=': 0, '>': 11, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5048562', 'n_tokens_mistral': 1407, 'n_tokens_neox': 1319, 'n_words': 811}