Briefly introduce the difference between HTML5 defer and async

The editor below will bring you a brief discussionHTML5The difference between defer and async. The editor thinks it is quite good, so I will share it with you now and give it as a reference for everyone. Let’s follow the editor and take a look.

The main way to insert Javascript into an HTML page is to use the 3f1c4e4b6b16bbbd69b2ee476dc4f83a element. This element was created by Netscape and was first implemented in Netscape Navigator 2. Later, this element was added to the official HTML specification. HTML4.01 defines 6 attributes for 3f1c4e4b6b16bbbd69b2ee476dc4f83a, including defer and async. Both defer and async are optional and only valid for external script files.

1. When the browser parses the script without defer or async:

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

The browser will Load and execute the specified script immediately. "Immediately" means before rendering the document element under the script tag, which means that it does not wait for subsequent loading of document elements. It loads and executes it as soon as it is read.

2. When the browser parses the script and has async:

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

The browser will download it immediately script, but does not prevent other operations on the page, such as downloading other resources or waiting for other scripts to be loaded. The process of loading and rendering subsequent document elements occurs in parallel (asynchronously) with the loading and execution of main.js.

async does not guarantee execution in the order in which the scripts appear. Therefore, it is very important to ensure that the two do not depend on each other before. The purpose of specifying the async attribute is to prevent the page from waiting for the download and execution of the two scripts, thereby loading asynchronously. For other content on the page, it is recommended that asynchronous scripts not modify the DOM during loading.

The asynchronous script will definitely be executed before the load event of the page, but it may be executed before or after the DOMContentLoaded event is triggered. Browsers that support asynchronous scripts include Firefox 3.6, Safari 5 and Chrome.

3. When the browser parses the script and there is defer:

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

means the script will be delayed It will not be executed until the document is completely parsed and displayed. The process of loading subsequent document elements will be performed in parallel with the loading of main.js (asynchronously). The HTML5 specification requires that scripts be executed in the order in which they appear, so the first deferred script will be executed before the second deferred script, and both scripts will be executed before the DOMContentLoaded event. In reality, delay scripts are not necessarily executed in order, nor are they necessarily executed before the DOMContentLoaded event is triggered, so it is best to only include one delay script.

IE4~IE7 also support the defer attribute for embedded scripts, but IE8 and later versions fully support the behavior specified by HTML5.

IE4, Firefox 3.5, Safari 5 and Chrome are the earliest browsers to support the defer attribute. Other browsers ignore this attribute and handle the script as normal. For this reason, placing deferred scripts at the bottom of the page is still the best option.

The blue line represents network reading, the red line represents execution time, both of which are for scripts; the green line represents HTML parsing.

This picture tells us the following key points:

defer and async are the same in terms of network reading (downloading). Both are asynchronous (compared to HTML parsing)

The difference between them lies in when the script is executed after it is downloaded. Obviously defer is closest to our requirements for application script loading and execution

About defer, the unfinished thing in this picture is that it executes the script in the loading order, which should be taken advantage of

async is a master that executes out of order. Anyway, for it, the loading of the script and execution are closely connected, so no matter what the order of your declarations, as long as it is loaded, it will be executed immediately

Think about it carefully, async is not very useful for application scripts because it does not consider dependencies at all. (Even the lowest level sequential execution), but it is very suitable for scripts that do not depend on any script or are not dependent on any script. The most typical example: Google Analytics

The above is the detailed content of Briefly introduce the difference between HTML5 defer and async. For more information, please follow other related articles on the PHP Chinese website!