how browser render a page with html/css/js

Basic steps:

1. DNS get the IP. Then send http/s request to the server to fetch the page content.

2. On getting the content, download the resources(css/js/images) and try to render it. Note: the render process would not begin before css is all downloaded since it does not make sense to render something without konwing its styling.

3. Build the DOM for the given HTML and the CSS-DOM for the style sheets. Then put these two together and build the Render-tree which will be used to paint the real viewable page.

4. Once we have the render tree, browser starts to do LAYOUT which will calculate the dimension of the elements(width/height) as well as the position. The viewport(root element ‘HTML’) will be place in the (0,0) position. 0,0 here is the innerHeight/innerWidth.

5. After the Layout is done, browser start to PAINT the render tree and output all the elements to the viewport.

Anytime css/DOM changes, the re-Paint or re-Layout will be triggered so that user get the latest view. See the below Article for detail.

My another post explains the sequence of the execution when page load

This is a nice article explaining the basics about the rendering process:

This is the most detail article on how browser work. 中文翻译: 现代浏览器的工作原理

This video also explained the basic in 4 minutes.

This is a better video explaining how browser render a page

Below is the BEST video so far explaining this topic by CTO of Akamai:

Advertisements

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