The primary responsibility of the rendering engine is to highlight the requested page on the browser’s screen. Rendering engines can show XML and HTML images and documents. If you’re utilising additional plugins, the engines can also exhibit various documents like PDF.
Receives the requested document : The contents of the requested document is obtained by the rendering engine from HTML’s networking layer.
Construct the DOM tree : Parsed the HTML to the parsed tree and then set up the DOM tree, making use of it.
Construct the CSSOM : CSSOM stands for CSS Object Model. Post the construction of the DOM tree, it identifies a link tag in the head section, which references the external style.css CSS style sheet. So, it parsed the CSS file in CSSOM tree, something which the Browser can comprehend as the DOM tree.
Construct the Render tree : Utilise the HTML DOM tree coupled with the styling data of the CSSOM tree to set up a render tree. Render tree is the graphical depiction of the HTML, with the corresponding CSS. This tree enables painting the contents in their right order. Every node in the Render Tree is regarded as a renderer. The Render tree looks like this:
Layout : When the renderer is developed and incorporated into the tree, it does not have a size or position. Computing these values is defined as layout. We use the coordinates system to position the element, such as the position of the root renderer is 0,0. The layout continues recursively via a part of the entire renderer hierarchy, calculating geometric info for every renderer that needs it. Beginning the layout process implies allowing every node the exact coordinates where it should show up on the screen.
Painting of the Render Tree : The renderer tree is traversed in this stage and the renderer’s paint() method is hailed to exhibit the content on the screen. For good UX, the rendering engine will aim to exhibit the contents on the screen as soon as possible. It will not stand by until all the HTML is parsed to develop and layout the render tree.
