DEV Community

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

Saurabh Daware 🌻 on February 19, 2020

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

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

Collapse
 
gobikrishnan profile image
Gobikrishnan T

Brother I have one doubt in your Article Which is u told like when the html parser see the line with script tag it will halts there
But even it is in last line means (i mean befor body end) when it saw the script tag,
there also it will slow know ?

So my doubt is parser is wrking dynamically? like when it saw the element it render on the screen ha ? or after completly parsed everything and then it will render on screen ha ?

Collapse
 
rizkyrajitha profile image
Rajitha Gunathilake

Good read. keep it up 🙌

Collapse
 
saurabhdaware profile image
Saurabh Daware 🌻

Thank you Rajitha 🦄🦄

Collapse
 
jitendravyas profile image
Jitendra Vyas

Does parsing really halt at as you have mentioned?

Collapse
 
saurabhdaware profile image
Saurabh Daware 🌻

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
 
douknowme profile image
Victor Tolkushyn

Very well put. Good job and thanks :)

Collapse
 
saurabhdaware profile image
Saurabh Daware 🌻

Thank you Victor :D

Collapse
 
a_mujthaba profile image
Ali Mujthaba

Great article. Looking forward to more

Collapse
 
saurabhdaware profile image
Saurabh Daware 🌻

Thank youuu!! more coming soon🐨🌻🌻

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 🌻

Thank you so much :D ✨

Collapse
 
joulesmc2 profile image
joulesmc2

This is amazing! I am a teacher and will be sharing this as required reading.

Collapse
 
yogeshyadav profile image
Yogesh Yadav

Good read, informative article.

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 🌻

Thank you Luiz🐨🌻

Collapse
 
tonynguyen137 profile image
共産主義のト二イ • Edited

Where is the next part? And about JS, is JS executed after the parsing which comes before the rendering process or is it executed after the rendering proccess?