Critical Rendering Path

What is it?

  • The sequence of steps the browser goes through to render the page, to convert the HTML, CSS and Javascript into actual pixels on the screen.
  • Always measure first! and Optimize it!

Converting HTML To The DOM
htmlToDOM

  • Make a request to Server with HTML -> The HTML will be converted to DOM (The browser will be processing the HTML and building the DOM)
  • The specific rules
  1. Every time the browser meets a tag bracket, it automatically emits a token.
  2. e.g)
    makingAtoken
  3. This entire process is done by the tokenizer.
  4. While it’s being processed, another process is happening which is consuming the token to create nodes.

nodesRelationship

  • DOM : a tree structure that captures the content and properties of the HTML and all the relationships between the nodes.
  • How Google does optimize it? :
  • [Incremental HTML Delivery] Think about the Google Search Engine. The header renders first and the rest of the HTML based on your search query will be shown to the user. (Returning the partial HTML could be a really nice performance optimization)
  • StackTrace in Timeline :
    timeline
  • (1) Send Request –> (2) Receive Response -> (3) Receive Data -> (4) Finish Loading -> (5) Parse HTML (Request CSS, Javascript and Images)

The CSSOM

Render Tree

  • Combine above those two DOM tree and CSSOM into the render tree.
  • Render tree only captures visible contents
  • How does it work?

Layout

  • To know where and how all the elements are positioned on the page
  • “ setting the width as your device width. e.g) device width=320px is width=320px

CRP workflow

  1. Request HTML Resources
  2. Receive Data
  3. Parse HTML (Converting the received Bytes to DOM tree)
  4. Request CSS / Images / Javascript
  5. Contruct CSS Object Model
  6. Recalculate Style (Layout : Build Render Tree (Computing all the styles for the visible contents)
  7. Layout (Compute the location and the size of the render tree elements)
  8. Paint (Render the page on screen)
Advertisements

Author: Josh Jang

Mobile & Web Enthusiast, calling myself a geek. Interested in developing stuffs to make it easier for people and increasing productivity in what people have to do. True Beer Geek.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s