Critical rendering path

What is critical rendering path ?

It is the sequence of steps that the browser goes through to render the actual pixels on the page

Critical : Important or absolutely needed
Render : When the page can be seen by the user
Path     : Chain of events that lead to our web page being displayed in a browser 

Need for understanding critical rendering path ?

We can optimize website performance

Steps involved:                   

1. Creation of DOM : Stores the data about the content of the page and properties of each node
2. Creation of CSSOM : Stores css information to display the content
3. Creation of Render tree : Contains the content and csssom. Would eliminate if any of the contents are hidden
4. Layout : Contains the actual layout details including width and height.
5. Paint :Each node of the render tree is drawn on the screen (Putting pixels on the page.)