Browser - Rendering ( HTML Latency)

Render tree

Render tree building stage: The CSSOM and DOM trees are combined into a render tree.

Before the browser can render a page, it has to build a render tree that is composed of :

• the DOM tree (by parsing the HTML markup)
• and CSSOM trees (CSS Object model) (by parsing the CSS markup)

ie:

• HTML markup is transformed into a Document Object Model (DOM);
• CSS markup is transformed into a CSS Object Model (CSSOM).

The browser signal that the render tree has been build by sending a DomContentLoaded event.

Render tree contains only the nodes required to render the page.

Layout

Layout stage: The render tree is then used to compute the layout of each visible element and serves as an input to the paint process that renders the pixels to screen.

This stage:

• calculates the exact position and size of each object in the render tree within the viewport of the device.
• and creates a box model which precisely captures the exact position and size of each element within the viewport.

Painting

Painting (Rasterizing) renders the tree by manipulating each pixels to the screen. See Web Page - Painting