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.
Top comments (0)