Amandeep Singh
Nov 15, 2019 · 1 min read

To answer Omar Wraikat question, the browser needs to pause the parsing whenever it encounters a script tag as it doesn’t know if the requested script is going to change the DOM construction down the line or not. To play safe, the browser downloads it and then later hands it over to the JS engine to execute.

But you can direct the browser to fetch script asynchronously by using async or defer attributes inside the script tag.

<script async src="script.js"></script><script defer src="script.js"></script>

async: Browser will go ahead and fetch your script asynchronously while still keep on parsing. But when the script has been downloaded, it pauses the parsing and goes on the execution step.
defer: Browser will go ahead and fetch the file asynchronously while keep on parsing the HTML. The script doesn’t run until the parsing is complete.

Here’s the resource link if you want to read in details: https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/loading-third-party-javascript#use_async_or_defer

Amandeep Singh

Written by

Developer @ Thinkmill Sydney. Tech enthusiast and a pragmatic programmer. If coding is hard, you are not doing it right.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade