At first glance, the async and defer properties of the Script tag seem to do the same thing, but there are subtle differences between them. More often than not, you will need the defer property rather than the async property, even though the async property seems sexier.

Before the async and defer properties appear

By default, when the browser encounters a Script tag while loading a DOM element, it is forced to stop loading the rest of the PAGE’s DOM elements until the code in the script tag has been downloaded and executed. This means that the code inside the script tag is obstructing, preventing page DOM elements from being downloaded and rendered. If the code in a script tag takes a long time to execute, this means that the page will be blank for a long time, which is a bad experience.

Before the async and defer properties, smart programmers figured out how to place the Script tag at the bottom of the page (in front of the tag) so it wouldn’t block the rendering of the page. It still works, you’re still free to use it, and you don’t have to feel guilty about continuing to use it.

async VS defer

The async and defer properties can both download code from the Script tag without blocking the page load, but there are differences.

  1. The defer attribute waits for the page DOM element to load before executing, while the Async attribute does not;

    This means that when your script code needs DOM elements, you should use the defer attribute; If you stick to the Async property, you run the risk of not getting the PAGE’S DOM elements.

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

<body> 
    <! -- 20000 buttons --> 
</body>
Copy the code
// defer.js 
const deferButtons = document.querySelectorAll('button') 
console.log('Defer:', deferButtons.length)

/ / 20000
Copy the code
// async.js 
const asyncButtons = document.querySelectorAll('button') 
console.log('Async:', asyncButtons.length)

/ / 11139
Copy the code

  1. The script tags of the defer attribute tag are loaded in order, while the async attribute is not;

    This means that predictable script execution order is a must when your script files need to depend on each other.

<script async src="script1.js"></script>
<script async src="script2.js"></script>
<script async src="script3.js"></script>

// two
// three
// one
Copy the code
<script defer src="script1.js"></script> 
<script defer src="script2.js"></script> 
<script defer src="script3.js"></script>

// one
// two
// three
Copy the code

When can you use Async

  1. When your script code needs itDOMThe elements are all loaded or you don’t need themDOMElements;
  2. When your script file does not need to depend on other script files.

When can you use defer

The defer attribute can be used in any scenario where the async attribute is inappropriate.

Using the defer attribute has the following benefits:

  1. It will load the page without blockingDOMElement case asynchronous download, reduce the total page load resource time;
  2. It waits for the page to complete after downloadingDOMElements are executed when rendered, so you don’t have to worry about not getting what you needDOMThe element;
  3. It will execute everything on the page in orderscriptFiles so you can prioritize the ones you need to executescriptFile first.

Given the benefits of the defer attribute, you can even place the Script tag at the head of the page without blocking the loading of DOM elements. Placing the script tag at the head of the page makes it easy to see what script files the page needs, creating a cleaner HTML as a whole.

<head> 
    <script defer src="script1.js"></script> 
    <script defer src="script2.js"></script>
    <script defer src="script3.js"></script> 
</head>
Copy the code

conclusion

While the Async property may seem sexier, in most scenarios you actually need the defer property more. The defer attribute is also recommended because using defer asynchronously, as opposed to traditional script code loading, reduces the overall resource loading time for the page.

See article # How and When to Use Async and Defer Attributes