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
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/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.