Render Tree

It is a combined representation of Document Object Model (DOM) and CSS Object Model (CSSOM) where DOM nodes and CSS rules are matched together.

Browser parses HTML document and constructs a DOM tree where each element represents a node in the DOM tree and simultaneously parses CSS stylesheets and constructs CSSOM which represents styles to be applied to each DOM nodes.

Render blocking

Render blocking HTML

Browsers load web page incrementally starting from top of HTML document. It must process and parse all the HTML before it is rendered to the screen. Hence, HTML is considered as render blocking just to avoid seeing a flash of unstyled content of the webpage before displaying the actual webpage.

Render Blocking CSS

CSS styling is also considered to be render blocking since CSS rules are overriding and final CSS rules which are to be applied to the page cannot be determined until all the CSS has been fetched and parsed.

💡

Any elements which are not intended to be shown on the screen are not the part of the render tree. Such as <head> tag or elements which are hidden.

Render tree elements

1. RenderObject

It represents single node in render tree and encapsulates information about layout, style and painting.

2. RenderLayer

Logical grouping of rendering elements in a render tree is handled by this concept.
Grouping elements into multiple layers helps optimize rendering performance and handle elements efficiently.
Positioning, opacity, overflow, stacking context etc. helps determine the RenderLayers

3. RenderBox

Any RenderObject which represents a rectangular box and is used for layout calculations
<div>, <span>, <p> etc. that participate in layout calculations and have width, height, padding, margin etc. properties.

4. RenderInline

It is a RenderBox which is used for inline elements.

5. RenderBlock

It is a RenderBox which is used for block level elements.

6. RenderText

RenderTexr represents text nodes of the render tree.
It has font, color, text-layout etc properties.

7. RenderImage

It represents image element in the render tree
It has image source, dimensions scaling etc. properties.

Optimizing render tree

A. Optimizing HTML

Minimize the level of nesting in your HTML structure to avoid unnecessary complexity as larger DOM trees require more memory and processing power to render.
Use semantic HTML elements that convey the meaning of the content. <nav>,<main> ,<section> ,<aside> etc., provide clarity to both developers and browsers about the purpose of each section.

B. Optimize CSS

Bundle multiple CSS files into a single file to reduce the number of HTTP requests and improve loading times.
Write the most vital CSS rules inline to reduce render blocking CSS and improve time to first render.
use <link> tags instead of @import wherever possible as link tags are non blocking and asynchronous by default while @import blocks parallel downloads slowing the rendering process.
Dynamically load CSS using Javascript or asynchronously load CSS in a non blocking manner to improve rendering.
Set Cache Control headers to cache CSS files locally.
Enable file compression at server level or through CDN configurations.
Use HTTP/2 server push to send CSS files to client's cache along with initial HTML response reducing number of subsequent requests.
Preload critical CSS resources using the <link rel="preload"> tag to initiate early fetching of CSS files before they are needed.

💡

Monitor metrics like First Contentful Paint (FCP), Time to Interactive (TTI), and Total Blocking Time (TBT) to measure and optimize rendering performance.

The render tree containing DOM and CSSOM, instructs how elements are to be displayed on the page. Optimizing HTML and CSS delivery ensures efficient loading and parsing, allowing the render tree to be constructed quickly and improve user experience.

Avinash's Blog