JavaScript Loading Techniques: Async vs. Defer
Amr Saafan
Founder | CTO | Software Architect & Consultant | Engineering Manager | Project Manager | Product Owner | +27K Followers | Now Hiring!
Introduction:
Due to its importance in contemporary online applications, JavaScript has a big impact on how quickly pages load and how users interact with them. Enhancing the functionality of a website is crucial in the ever-changing field of web development. Async and defer properties are two ways that JavaScript files are often loaded. We'll examine these loading strategies in detail in this extensive tutorial, helping you to grasp their variations, benefits, and applications so you can make wise choices for your web development endeavors.
Understanding JavaScript Loading:
Before diving into async and defer, let's first understand how JavaScript loading works in the browser. When a browser encounters a <script> tag in an HTML document, it immediately pauses HTML parsing and begins fetching and executing the script. This synchronous behavior can lead to delays in rendering the rest of the page content, especially if the JavaScript file is large or hosted on a slow server.
To mitigate this issue and improve page loading performance, developers employ various loading techniques, including async and defer.
Async Attribute:
The async attribute is used to indicate that the script should be executed asynchronously as soon as it is available, without blocking HTML parsing. Here's how you can use the async attribute:
<script src="example.js" async></script>
The browser keeps processing the HTML text while requesting the script in the background when it comes across a script with the async property. Whether or whether the HTML parsing is finished, the script is run as soon as it is downloaded. This implies that the order in which scripts are executed may differ from the order in which they appear in the HTML text.
Async Example:
Let's consider an example where we have two JavaScript files: script1.js and script2.js, both with console.log statements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Async Example</title>
</head>
<body>
<script src="script1.js" async></script>
<script src="script2.js" async></script>
</body>
</html>
In this scenario, both script1.js and script2.js will be downloaded asynchronously, and their execution will start as soon as they are available. If script2.js finishes downloading before script1.js, it will be executed first, leading to potentially unexpected behavior.
领英推荐
Defer Attribute:
Unlike the async attribute, the defer attribute also allows the script to be downloaded asynchronously, but it ensures that the script is executed only after the HTML parsing is complete. Here's how you can use the defer attribute:
<script src="example.js" defer></script>
When the browser encounters a script with the defer attribute, it continues parsing the HTML document while fetching the script in the background, similar to async. However, the deferred script is not executed until the HTML parsing is finished, just before the DOMContentLoaded event is fired.
Defer Example:
Let's modify the previous example to use the defer attribute instead of async.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Defer Example</title>
</head>
<body>
<script src="script1.js" defer></script>
<script src="script2.js" defer></script>
</body>
</html>
In this case, both script1.js and script2.js will be downloaded asynchronously, but their execution will be deferred until after the HTML parsing is complete. If script2.js finishes downloading before script1.js, it will still wait for script1.js to finish before executing.
Comparison
Let's compare the three loading techniques based on various factors:
Conclusion
Understanding JavaScript loading techniques is essential for optimizing website performance. Synchronous loading ensures script execution order but may lead to performance bottlenecks. Async and defer loading techniques alleviate these issues by allowing scripts to load asynchronously, improving page loading speed and user experience.
Experiment with these techniques in your projects to find the optimal balance between performance and functionality. By leveraging async and defer loading appropriately, you can create fast, responsive web applications that delight users. Happy coding!
Malta Net Salary and Income Tax Calculator
3 个月Thanks for sharing such a helpful piece.
Hey Amr Saafan "When a browser encounters a <script> tag in an HTML document, it immediately pauses HTML parsing and begins fetching and executing the script." this doesn't seem right as you can see on the attached screenshot, all those scripts don't have 'async' or 'defer' keyword, so according to this part of the article parser should load next script only after previous one was loaded, but that is not the case and each script is downloaded asynchronously.