Async vs Defer in JavaScript: Understanding the Difference

When it comes to loading scripts in HTML, there are three ways to do it: normally, asynchronously (async), and deferred (defer). In this post, we’ll explore the differences between these three methods and how they impact your web page’s performance.


This content originally appeared on DEV Community and was authored by Laxman Nemane

When it comes to loading scripts in HTML, there are three ways to do it: normally, asynchronously (async), and deferred (defer). In this post, we'll explore the differences between these three methods and how they impact your web page's performance.

Normal Script Loading

When you load a script normally, the browser will pause rendering the HTML document until the script has finished loading and executing. This can cause a delay in the page's load time, especially if the script is large or takes a long time to execute.

Async Script Loading

The async attribute allows the browser to continue rendering the HTML document while the script is loading. Once the script has finished loading, it will be executed immediately. This can improve the page's load time, but it can also cause issues if the script relies on other scripts or resources that haven't finished loading yet.

Defer Script Loading

The defer attribute is similar to async, but it allows the browser to continue rendering the HTML document while the script is loading. However, unlike async, defer scripts are executed only after the HTML document has finished parsing. This means that defer scripts will always be executed after the DOM has been loaded, which can be useful if the script relies on the DOM being present.


This content originally appeared on DEV Community and was authored by Laxman Nemane


Print Share Comment Cite Upload Translate Updates
APA

Laxman Nemane | Sciencx (2024-10-07T04:37:08+00:00) Async vs Defer in JavaScript: Understanding the Difference. Retrieved from https://www.scien.cx/2024/10/07/async-vs-defer-in-javascript-understanding-the-difference/

MLA
" » Async vs Defer in JavaScript: Understanding the Difference." Laxman Nemane | Sciencx - Monday October 7, 2024, https://www.scien.cx/2024/10/07/async-vs-defer-in-javascript-understanding-the-difference/
HARVARD
Laxman Nemane | Sciencx Monday October 7, 2024 » Async vs Defer in JavaScript: Understanding the Difference., viewed ,<https://www.scien.cx/2024/10/07/async-vs-defer-in-javascript-understanding-the-difference/>
VANCOUVER
Laxman Nemane | Sciencx - » Async vs Defer in JavaScript: Understanding the Difference. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/10/07/async-vs-defer-in-javascript-understanding-the-difference/
CHICAGO
" » Async vs Defer in JavaScript: Understanding the Difference." Laxman Nemane | Sciencx - Accessed . https://www.scien.cx/2024/10/07/async-vs-defer-in-javascript-understanding-the-difference/
IEEE
" » Async vs Defer in JavaScript: Understanding the Difference." Laxman Nemane | Sciencx [Online]. Available: https://www.scien.cx/2024/10/07/async-vs-defer-in-javascript-understanding-the-difference/. [Accessed: ]
rf:citation
» Async vs Defer in JavaScript: Understanding the Difference | Laxman Nemane | Sciencx | https://www.scien.cx/2024/10/07/async-vs-defer-in-javascript-understanding-the-difference/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.