I'm back after a 20 days without any blogs. Will be posting about what I did in these 20 days. So here's my new post about async vs defer attribute in JavaScript. Let's go.
When you load a webpage then there are two major things happening in your browsers:
- HTML Parsing
- Loading of the scripts
Loading of the scripts contain two parts:
- Fetching the script from the network.
- Executing the script line by line.
The <script> element has two attributes, async and defer, that can give us more control over how and when external; files are fetched and executed.
async and defer are boolean attributes that are used along with the <script> tag to load the external scripts efficiently into your webpage.
Normal <script> tag
<html>
<head>...</head>
<body>
...
<script src="main.js">
...
</body>
</html>
Suppose your browser is parsing the HTML and then it encounters the <script> tag.
Normal <script> tag
In the case of the normal <script> tag following steps takes place:
- JS blocks the parsing of HTML
- Fetches the script from the network
- Executes the script
- HTML parsing is started only after the script is fully executed
The async attribute
The async attribute is used to indicate to the browser that the script file can be executed asynchronously.
<script async src="main.js">
- While using the async attribute, meanwhile, the HTML parsing is going on, any of the script with the async attribute is fetched from the network asynchronously along with the HTML parsing.
The async attribute
As soon as scripts are fetched and available in the network, HTML parsing stops and scripts start executing.
Once the scripts are executed, the HTML parsing continues like regular.
The defer attribute
<script defer src="script.js">
The defer attribute tells the browser to only execute the script file once the HTML document has been fully parsed.
The defer attribute
In this case:
- HTML parsing goes on and scripts are fetched in parallel
- Scripts are only executed once the HTML parsing is complete.
This blog was originally posted at => [https://rahulism.tech/article/async-vs-defer-in-JS/]
😎Thanks For Reading | Happy Coding😃
Top comments (7)
Nice reminder. I've never been sure what a smart use-case is for
async, it seems likedeferis almost always the more appropriate choice on a webpage so the HTML can finish parsing before any JS executes.I've never come across a use-case where I'd use async :p
Great article. Does defer remove the need to use the document load / onload event to only run some code when the doc is fully loaded?
No - with
defer, the script will wait for the browser to finish parsing the HTML into a DOM tree, but will not wait for all of the page's assets (like images, css, 3rd-party files, etc.) to finish loading. Often you don't need to wait quite so long as theloadevent before your JS can start doing things like DOM manipulation (hiding an element, etc.), adding event listeners, etc., you just need the DOM to be set up. But if you do need to wait forload, you can usedeferon thescripttag but you still need to wrap your code in awindow.addEventListener('load')event.That makes sense. Thank you!
Good article :D
Thanks Man!