Browser - Rendering

> (World Wide) Web - (W3|WWW) > Web - Browser

1 - About

Rendering is typically the process of generating output that can be read by the client.

Before the browser can render a page, it has to build :

ie:

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

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 that renders the pixels to screen.

See also: Web - Lifecycle of a page load (Timeline)

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

Steps:

  • Render tree building stage: The CSSOM and DOM trees are combined into a render tree
  • Layout stage: Computes the exact position and size of each object in the render tree. It calculate the exact position and size within the viewport of the device. The output of the layout process is a box model which precisely captures the exact position and size of each element within the viewport
  • Painting/Rasterizing: Paint the render tree to renders each pixels to the screen.
Advertising

3 - Performance

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.  Paul Lewis on Rendering Performance

4 - GoogleBot

See how google Bot see you website at: URL inspection of Search Console

5 - Performance

6 - Documentation / Reference

Advertising
web/browser/rendering.txt · Last modified: 2019/03/23 16:55 by gerardnico