DEV Community

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

Read full post

Rajitha Gunathilake • Feb 19 '20

Good read. keep it up 🙌

Saurabh Daware 🌻 • Feb 19 '20

Thank you Rajitha 🦄🦄

cray2015 • Feb 21 '20

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

Saurabh Daware 🌻 • Feb 21 '20

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

Gobikrishnan T • Jun 4 '21

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 ?

Jitendra Vyas • Mar 27 '20

Does parsing really halt at as you have mentioned?

Saurabh Daware 🌻 • Mar 27 '20

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

Ali Mujthaba • Feb 21 '20

Great article. Looking forward to more

Saurabh Daware 🌻 • Feb 21 '20

Thank youuu!! more coming soon🐨🌻🌻

Victor Tolkushyn • May 23 '20

Very well put. Good job and thanks :)

Saurabh Daware 🌻 • May 24 '20

Thank you Victor :D

Ghanshyam • Jun 21 '20

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

Saurabh Daware 🌻 • Jun 22 '20

Thank you so much :D ✨

共産主義のト二イ • Feb 15 '24 • 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?