DEV Community

loading...
Cover image for HTML parsing and rendering🌻: Here's what happens when you type URL and press enter...

HTML parsing and rendering🌻: Here's what happens when you type URL and press enter...

saurabhdaware profile image Saurabh Daware 🌻 ・5 min read

Hi there! I am writing a series of articles called "Web Performance Hacks" and this will be the first article from the series.

This article aims to show how browsers parse and render HTML and CSS which will eventually help us in understanding how we can trick the browser's parser to improve web performance.

TLDR;

  • Parsing and Rendering turn the HTML content into a web page with colors and backgrounds and pictures.
  • HTML Parsing: HTML Text -> Tokenization -> DOM Tree
  • CSS Parsing: CSS Text -> Tokenization -> CSSOM Tree
  • DOM and CSSOM are merged to form a Render Tree
  • Render Tree has all the information required to mark and paint the screen.
  • Render Tree -> Layout -> Paint
  • The layout does the maths for placing the elements
  • Paint paints the elements with colors, backgrounds, shadows, etc.

SO LETS GOOO!!!!

First, let's see what happens when you type a URL and hit enter

How browsers work

We type a URL and press the enter and the server responds with index.html. However, an HTML content is not what we see when we visit a website... we see a web page with colors and backgrounds and animations and pictures. So there's a process that turns the HTML content to a pretty webpage, and that is parsing and rendering!

A gif displaying a server is hit when you type URL and returns HTML content, then HTML content goes through parsing and rendering to get the webpage
Note: This is a zoomed-out view and there are other things like DNS resolving and other networking side of things that I've ignored to simplify the article

HTML Parsing

So we have HTML content at the beginning which goes through a process called tokenization, tokenization is a common process in almost every programming language where code is split into several tokens which are easier to understand while parsing. This is where the HTML's parser understands which is the start and which is the end of the tag, which tag it is and what is inside the tag.

Now we know, html tag starts at the top and then the head tag starts before the html ends so we can figure out that the head is inside html and create a tree out of it. Thus we then get something called a parse tree which eventually becomes a DOM tree as shown in the image below:
An image showing how HTML Parsing works with HTML content at the top then tokenization and a DOM tree

DOM tree is what we access when we do document.getElementById or document.querySelector in JavaScript.

Just like HTML, CSS goes through a similar process where we have the CSS text and then the tokenization of CSS to eventually create something called a CSSOM or CSS Object Model.

This is what a CSS Object Model looks like:
a diagram of CSSOM tree displaying body with its CSS properties in its one node and div on the other node, div has its CSS properties as well

Awesome! now we have DOM and CSSOM so we got every information that is required to get our screens painted!

Rendering of Web Page

For rendering, a DOM and CSSOM are merged to form something called a Render Tree. Render Tree has the information required to mark and paint elements on the screen.
A diagram showing DOM tree and CSSOM tree being merged to form Render Tree, Few things to note are render-tree does not include head, link, script, and elements with display none

Also while forming a Render Tree, elements like <head>, <link>, <script>, and elements with 'display: none' in CSS are ignored since they are not rendered on the screen.

Note that the elements with 'opacity:0' or 'visibility: none' are included in the render tree, even though they are not painted on the screen they do take their positions and render as an empty space and thus are required for calculations.

Huushh! you've come a long way! drink a glass of water maybe?

So now we have a render tree with all the information that is needed to create a visual page. Now, the renderer will use this information to create a Layout and then a Paint, we will talk about Layout and Paint in next point before that here's what the overall process looks like:

A diagram displaying that DOM and CSSOM come together to form Render Tree and then the Layout happens and then at the end the Paint happens

Layout

The layout is where the elements are marked on the screen. The layout includes all the calculations and mathematics behind an element's position so it takes all the properties related to the position (height, width, position, top left right bottom, etc) from The Render Tree and places the elements on the screen.

Paint

After Layout, a Paint happens. Paint takes properties like color, background-color, border-color, box-shadow, etc. to paint the screen with colors.

After the paint, we see the content on the screen and the first time we see something other than a white screen is called 'First Paint'. The term First Paint is used in performance reports to show how long your website took to show something on the screen.

Gotchas!

Now, there are few important points to note in the whole process of parsing and rendering such as,

- Parsing halts when it comes across <link>, <script>, and <style> tag.

So if I have <script src="path/to/script"></script> in the middle of the HTML, The parser will halt there, will fetch the script, wait for the response, execute it and then it will continue the parsing. This is why we put <scipt> at the end of the body so that we can complete the parsing first.

A similar thing happens when we put <link rel="stylesheet" href="path/to/css" />. The parser fetches the CSS and makes sure that the CSSOM is ready before putting content on the screen. This is why we don't see a flash of CSSless content before the page load instead we see the content with its CSS loaded and applied.

Even though I said that the parsing halts when it comes across <link> and <script>, there are ways to avoid that using async and defer on the <script> tag and rel="preload" on <link> We'll see that in details in the next part of this series.

Anddd... we're done! Thank you for reading the article!!

Discussion (15)

pic
Editor guide
Collapse
rizkyrajitha profile image
Rajitha Gunathilake

Good read. keep it up 🙌

Collapse
saurabhdaware profile image
Saurabh Daware 🌻 Author

Thank you Rajitha 🦄🦄

Collapse
cray2015 profile image
cray2015

quite informative article from such a young mind! u have a great future ahead kiddo.

Collapse
saurabhdaware profile image
Saurabh Daware 🌻 Author

That is so kind of you! thank you so much 🐨🎉

Collapse
douknowme profile image
Victor Tolkushyn

Very well put. Good job and thanks :)

Collapse
saurabhdaware profile image
Saurabh Daware 🌻 Author

Thank you Victor :D

Collapse
ghanshyamkdobariya profile image
Ghanshyam

At this young age, things you have explained, generally experienced developers do not in interviews..
Superb... All the very best

Collapse
saurabhdaware profile image
Saurabh Daware 🌻 Author

Thank you so much :D ✨

Collapse
amujthaba321 profile image
Ali Mujthaba

Great article. Looking forward to more

Collapse
saurabhdaware profile image
Saurabh Daware 🌻 Author

Thank youuu!! more coming soon🐨🌻🌻

Collapse
jitendravyas profile image
Jitendra Vyas

Does parsing really halt at as you have mentioned?

Collapse
saurabhdaware profile image
Saurabh Daware 🌻 Author

Yes it does, you can try running

 <body>
    This will load first Lorem ipsum dolor, sit amet consectetur adipisicing
    elit. Et, adipisci quisquam? Odit facere quod excepturi nihil fuga! Dolore
    culpa error veritatis rerum quia, suscipit deleniti debitis! Placeat ab
    dignissimos nulla.
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.js"></script>
    <br /><br /><br />This will load later Lorem ipsum dolor, sit amet
    consectetur adipisicing elit. Aliquam enim fugit doloribus beatae eaque
    laborum asperiores aperiam, molestiae expedita mollitia, ipsa fugiat
    tempore. Quas eum, eos blanditiis cumque voluptas temporibus?
  </body>

the first paragraph will load initially then there would be a pause (this is where it will load and execute javascript files) and then the second paragraph will load

Collapse
kpulkit29 profile image
Pulkit Kashyap

Good Read. Gives an overall picture of what really happens under the hood.

Collapse
luizfoli profile image
Luiz Oliveira

Great read, congrats!

Collapse
saurabhdaware profile image
Saurabh Daware 🌻 Author

Thank you Luiz🐨🌻