About
Rendering is a page load phase that consists of generating an output that can be read by the client.
Steps
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)
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:
Painting
Painting (Rasterizing) renders the tree by manipulating each pixels to the screen. See Web Page - Painting
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.
GoogleBot
To see how google Bot see you website, you can go to the search console. More … see Googlebot Page rendering