What is Render tree

The render tree is an internal representation of a webpage's layout that's used by web browsers to determine how to display the content. When a web page is loaded, the browser's rendering engine constructs a tree-like data structure that represents the hierarchy of the HTML elements on the page. The render tree includes only the nodes that affect the layout of the page, such as elements with visible content or those that affect the positioning of other elements. It excludes non-visible elements such as "head" or "script" tags.

The render tree is constructed by combining the DOM tree and the CSSOM (CSS Object Model) tree.

The render tree is used by the browser's layout engine to determine the positioning and size of each element on the page. The layout engine calculates the dimensions and position of each element based on its box model (e.g., margin, padding, border, and content), as well as the positioning and sizing properties set by the CSS styles.

Once the layout engine has calculated the position and size of each element, it can paint the elements onto the screen using the graphics engine. The graphics engine converts the render tree into a set of pixels that can be displayed on the screen.

In summary, the render tree is an intermediate representation of a webpage's layout that's used by the browser to calculate the position and size of each element and then paint them onto the screen.