Browser - Rendering



Rendering is a page load phase that consists of generating an output that can be read by the client.


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 :


  • 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 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 (Rasterizing) renders the tree by manipulating each pixels to the screen. See Web Page - Painting


Most devices today refresh their screens 60 times a second. If there’s:

the browser needs to match the device’s refresh rate and put up 1 new picture, or frame, for each of those screen refreshes.

Each of those frames has a budget of just over 16ms (1 second / 60 = 16.66ms). In reality, however, the browser has housekeeping work to do, so all of your work needs to be completed inside 10ms.

When you fail to meet this budget the frame rate drops, and the content judders on screen. This is often referred to as jank, and it negatively impacts the user’s experience. 


To see how google Bot see you website, you can go to the search console. More … see Googlebot Page rendering


Documentation / Reference

Discover More
Browser - Cross-Origin Read Blocking (CORB)

Cross-Origin Read Blocking (CORB) is a security feature that prevents the contents of a resource from ever entering the memory of the renderer process memory based on its MIME type. The main motivation...
Browser - DOMContentLoaded event (page load)

DomContentLoaded is a page load event that signals that the parser has finished the construction of the DOM. The resources at the left or touching the blue line are blocking the construction of the DOM....
CSS - Boxes (Box Model)

CSS The Box model means that each element is represented as a rectangular box. The layout phase of the browser rendering engine creates the box model as a tree of box and determines: the , the...
HTML - Browsing context

A browsing context is a navigational context (environment) in which HTML document are rendered to the user. Each browsing context has: its own variable its own cookie its own dom and eventually...
Html Script Async Vs Defer
HTML - Defer attribute

defer is an boolean attribute of script element that indicates to the user agent (browser) that it should execute the script: after the DOM has been created (the HTML document read entirely and has...
HTML - Page

An html page is a logical representation of a HTML document. HTML Generally, one HTML document is one page but with the advent of javascript, you can create pages on the fly (modify the HTML DOM document)...
HTML - Span element

The span element is a generic wrapper for phrasing content that by itself does not represent anything. Span doesn't have explicit attributes. Span is then handy to use: as placeholder for Javascript...
How to preload HTML resource (Javascript, StyleSheet)

This article shows you how to preload HTML resources to use them at a later time.
Java Conceptuel Diagram
JavaServer Faces (JSF)

The request: means to maintain the state for the time of a request session: means to maintain the state for the time of a session (between page views) none: means that the bean will be created but...
Layout Shift Devtool Performance
Layout Shift: How to prevent it ? (Cumulative Layout Shit / CLS)

A layout shift occurs when the rendering of the web page shifts / move element from their current position. For instance: without the knowledge of the target ratio (via the height and width attribute...

Share this page:
Follow us:
Task Runner