Today I am going to explain Rendering in Web Development in brief.
Rendering in general (not in terms of Web Development) refers to the process of applying a coating of cement on the external walls to make them smooth or textured.
Similarly in Web Development, Rendering turns the website code into interactive pages that users see on the website.
What is Rendering?
Rendering is the process used in Web Development that converts the code that you have written in your application into interactive pages that users can see when they visit the web pages.
When a user requests a web page it must be parsed into some usable code before it is rendered on the screen with the help of rendering engines commonly referred to as browser engines.
Process of Rendering web pages on browsers
When a web page is requested web server sends a folder of files containing HTML, CSS, and JavaScript to the user's web browser. The browser engine then converts those files' data into characters (HTML code).
After that, the characters are parsed into tokens which are later parsed into the nodes.
The browser engine then will link all the nodes into a tree structure which is known as Document Object Model (DOM). The DOM is a JavaScript representation of HTML code.
Similarly, the browser engine will convert the CSS into CSS Object Model (CSSOM).
After obtaining DOM and CSSOM the browser engine will combine them to create a tree-like structure which is called a Render Tree (RT). The Render Tree is responsible for creating the end user's interactive pages.
The Render Tree will hold all the visible nodes along with content information and computed styles that are needed to be populated on a webpage. The Render Tree will match up all the relevant styles for every visible node in the DOM tree and determine the computed style based on the CSS cascade for each node.
Using the Render Tree the browser engine will calculate the position of each visible element of the web page.
After all these steps the browser engine will add and paints the elements on the web page for the site visitor.
Even declarative code that is plain HTML files cannot work properly. The code has to be transformed before it can start the process of the Critical Rendering Path (CRP).
These are the steps that the browser takes to convert your code into actual pixels on the screen including the Document Object Model (DOM), CSS Object Model (CSSOM), the Render Tree, and Layout.
References
Rendering - https://www.seobility.net/en/wiki/Rendering
Rendering on Web - https://web.dev/rendering-on-the-web