Async

Differences Between Defer, Async, and Preloading JavaScript Files

Posted on by XanderZ

Introduction

Optimizing the loading of JavaScript files is crucial for improving website performance. Among the various techniques available, defer, async, and preload are commonly used but often misunderstood. This article explores these methods, explaining their differences, usage scenarios, and impacts on performance.

Content

Defer Javascript

The defer attribute ensures that a JavaScript file is downloaded asynchronously, but executed only after the HTML document has been fully parsed. This prevents the script from blocking the page rendering process.

Example Usage:

<script src="script.js" defer></script>

Behavior:

  • Downloads the script in parallel with HTML parsing.
  • Executes the script after the HTML parsing is complete.
  • Maintains the order of scripts as they appear in the HTML.

When to Use:

  • When the script relies on the entire DOM being available.
  • For non-critical JavaScript that can wait until the document is parsed.

Async Javascript

The async attribute also loads the script asynchronously, but it executes the script as soon as it is available, without waiting for the HTML parsing to complete.

Example Usage:

<script src="script.js" async></script>

Behavior:

  • Downloads the script in parallel with HTML parsing.
  • Executes the script immediately once it is downloaded.
  • Does not guarantee the order of execution if there are multiple async scripts.

When to Use:

  • For independent scripts that do not rely on other scripts or the DOM being fully parsed.
  • Typically used for analytics scripts or other non-blocking resources.

Preload Javascript

The preload technique involves using a <link> element to load resources early in the page’s lifecycle, before the browser’s main rendering process begins. It’s not specific to JavaScript and can be used for various resources.

Example Usage:

<link rel="preload" href="script.js" as="script">

Behavior:

  • Downloads the resource as soon as possible.
  • Allows the browser to fetch the resource before it is needed, potentially speeding up its execution.
  • Requires additional attributes to specify the type of resource (as attribute).

When to Use:

  • For critical JavaScript that needs to be loaded as soon as possible.
  • When you want to ensure a resource is fetched early without blocking rendering.

Practical Usage and Examples

Defer Example

Consider a scenario where you have a script that manipulates the DOM. You should use defer to ensure the DOM is fully loaded before the script runs.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Defer Example</title>
  <script src="dom-manipulation.js" defer></script>
</head>
<body>
  <div id="content">Hello, world!</div>
</body>
</html>

Async Example

For a script that sends analytics data, use async since it doesn’t depend on the DOM or other scripts.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Async Example</title>
  <script src="analytics.js" async></script>
</head>
<body>
  <div id="content">Hello, world!</div>
</body>
</html>

Preload Example

If you have a critical JavaScript file that you want to load as soon as possible, use preload.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Preload Example</title>
  <link rel="preload" href="critical.js" as="script">
  <script src="critical.js" defer></script>
</head>
<body>
  <div id="content">Hello, world!</div>
</body>
</html>

Questions and Answers

Q: Can I use both async and defer together?
A: No, they are mutually exclusive. Use async for independent scripts and defer for dependent ones.

Q: Does defer guarantee the order of script execution?
A: Yes, defer maintains the order of scripts as they appear in the HTML document.

Q: What happens if a script with async depends on another script?
A: It might cause errors since async does not guarantee the order of execution. Use defer instead.

Q: Is preload only for JavaScript?
A: No, preload can be used for various resources like stylesheets, fonts, and images.

Q: How does preload improve performance?
A: By fetching resources early, it ensures they are available as soon as they are needed, reducing load times.

Related Subjects

JavaScript Loading Strategies:

  • Description: Explores different methods for loading JavaScript to optimize performance.
  • Source: MDN Web Docs

Critical Rendering Path:

Defer Loaded JavaScript Files with Inline JavaScript
  • Description: Discusses the critical rendering path and how to optimize it.
  • Source: Google Developers

Web Performance Optimization:

  • Description: Comprehensive guide on various web performance optimization techniques.
  • Source: Web.dev

Lazy Loading:

  • Description: Technique to defer loading of non-critical resources during page load.
  • Source: Smashing Magazine

Conclusion

Understanding the differences between defer, async, and preload is key to optimizing your website’s performance. Use defer for dependent scripts, async for independent scripts, and preload for critical resources. By implementing these techniques, you can significantly improve the loading speed and overall user experience of your website.