When it comes to loading JavaScript in a website, understanding how different loading methods can impact the performance and behavior of your website is important. JavaScript can be loaded in various ways, primarily using the default loading method, async, and defer. Each of these methods has its own characteristics and use cases. In this post, we’ll explore these three methods to help you make informed decisions for your projects.
By default, JavaScript files are loaded synchronously when included in an HTML document. This means that the browser will pause parsing the HTML document to download and execute the JavaScript file before continuing.
Here is how you typically include a script using the default method:
<script src="script.js"></script>
The async attribute allows the browser to download the JavaScript file asynchronously while it continues to parse the HTML document. Once the script is downloaded, it is executed immediately, potentially before the HTML parsing is complete.
<script src="script.js" async></script>
The defer attribute also downloads the JavaScript file asynchronously, but the key difference is that the script is executed only after the HTML document has been fully parsed.
<script src="script.js" defer></script>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
