It is a 4 step process that the browser goes through to render our webpage, it involves:
1.) Conversion
2.) Tokenizing
3.) Lexing
4.) DOM Construction
Let's break down these steps into further details
1.) Conversion : HTML is transformed into DOM(Document Object Model) and CSS markup is transformed into CSSOM(CSS object model). DOM and CSSOM are independent tree data structures. The DOM and CSSOM are combined to form the render tree.
2.) Tokenizing: Render tree contains only the nodes required to render the page. (The visible DOM content)
3.) Lexing : Layout computes the exact position and size of each object and compute geometry of the each node. This process is responsible for visual formating model also called box model.
4.) DOM Construction : The last step is to paint , which takes in the final render tree and renders the pixel to the screeen.
Time required to perform Render Tree Construction , Layout and Paint varies based on :
1.) Size of the document : Larger the the size of the document, the more time it takes to render the page.
2.) The applied styles : A solid color is "cheap" to paint , while a drop shadow is "expensive" to compute and render.
3.) The device it is running on : Lower end devices takes more time and resources to load the web page and sometimes result in problems like freezing of the screen.
To Recap all the steps here is a 5 points summary :
Process HTML markup and build the DOM tree.
Process CSS markup and build the CSSOM tree.
Combine the DOM and CSSOM into a render tree.
4.) Run the layout on the render tree to compute geometry of each node.(box model also called visual formatting model).
5.) Paint the individual nodes on the screen.
Suppose we have have web page containing a h1 tag and img tag.
In this page , if either DOM or CSSOM were modified , browser would have to repeat the process(1-5) in order to figure out which pixels would need to re-rendered on the screen which is an expensive task in it self.
Critical Rendering Path : The Critical Rendering Path is the sequence of steps the browser goes through to convert the HTML, CSS, and JavaScript into pixels on the screen.(Steps 1 - 5 mentioned above).
Optimizing the Critical Rendering Path is the process of minimizing the total amount of time spent performing step 1 to 5. This is sometimes done by the browser itself and we can also use libraries and frameworks like React to get the best results.