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.

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

1. 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.

2. 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

1. Bundle multiple CSS files into a single file to reduce the number of HTTP requests and improve loading times.

2. Write the most vital CSS rules inline to reduce render blocking CSS and improve time to first render.

3. 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.

4. Dynamically load CSS using Javascript or asynchronously load CSS in a non blocking manner to improve rendering.

5. Set Cache Control headers to cache CSS files locally.

6. Enable file compression at server level or through CDN configurations.

7. Use HTTP/2 server push to send CSS files to client's cache along with initial HTML response reducing number of subsequent requests.

8. Preload critical CSS resources using the <link rel="preload"> tag to initiate early fetching of CSS files before they are needed.

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.