async vs defer in JavaScript - When to use them?
By: Linda Ng in Javascript Tutorials on 2023-04-04
Both async and defer are attributes that can be added to a script tag in HTML to control how the script is loaded and executed in the web page. Here are the differences between the two:
-
Execution:
- With
defer, the script is executed only after the HTML parsing is complete. - With
async, the script is executed as soon as it is available, regardless of whether or not the HTML parsing is complete.
- With
-
Order of Execution:
- With
defer, the order of execution of the scripts is maintained in the order they are specified in the HTML. - With
async, there is no guarantee of the order of execution of the scripts.
- With
-
Blocking:
- With
defer, the HTML parsing is not blocked while the script is being downloaded and executed. - With
async, the HTML parsing is blocked while the script is being downloaded and executed.
- With
When to use which one:
- Use
deferwhen the script does not depend on any other scripts or the DOM, and you want to maintain the order of execution of the scripts. - Use
asyncwhen the script is independent and can run in any order, and you want to speed up the loading of the page by downloading the script asynchronously.
It is also worth noting that both async and defer are not supported in all browsers, so it is important to test your code to ensure it works as expected.
Add Comment
This policy contains information about your privacy. By posting, you are declaring that you understand this policy:
- Your name, rating, website address, town, country, state and comment will be publicly displayed if entered.
- Aside from the data entered into these form fields, other stored data about your comment will include:
- Your IP address (not displayed)
- The time/date of your submission (displayed)
- Your email address will not be shared. It is collected for only two reasons:
- Administrative purposes, should a need to contact you arise.
- To inform you of new comments, should you subscribe to receive notifications.
- A cookie may be set on your computer. This is used to remember your inputs. It will expire by itself.
This policy is subject to change at any time and without notice.
These terms and conditions contain rules about posting comments. By submitting a comment, you are declaring that you agree with these rules:
- Although the administrator will attempt to moderate comments, it is impossible for every comment to have been moderated at any given time.
- You acknowledge that all comments express the views and opinions of the original author and not those of the administrator.
- You agree not to post any material which is knowingly false, obscene, hateful, threatening, harassing or invasive of a person's privacy.
- The administrator has the right to edit, move or remove any comment for any reason and without notice.
Failure to comply with these rules may result in being banned from submitting further comments.
These terms and conditions are subject to change at any time and without notice.
Comments