Sunday, November 29, 2015

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.)

No comments:

Post a Comment