Differences between HTML5 defer and async: html5defer

Differences between HTML5 defer and async: html5defer

The main method to insert Javascript into an HTML page is to use the <script> element. This element was created by Netscape and first implemented in Netscape Navigator 2. Later, this element was added to the formal HTML specification. HTML4.01 defines six attributes for <script>, including defer and async. Defer and async are both 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 immediately loads and executes the specified script. "immediate" refers to loading and executing the file elements before rendering the file elements under the script label. That is to say, the file elements are loaded and executed without waiting for subsequent loading.
 
2. When the browser parses the script with async:
 
<Script async src = "main. js"> </script>

The browser immediately downloads the script, but does not prevent other operations on the page, such as downloading other resources or waiting for loading other scripts. The process of loading and rendering subsequent document elements and the loading and execution of main. js are parallel (asynchronous ).
 
Async is not necessarily executed in the order in which the script appears. Therefore, it is important to ensure that the two are independent from each other before. The async attribute is specified to prevent the page from waiting for the download and execution of the two scripts, to load other page content asynchronously, we recommend that you do not modify the DOM during loading.
 
The asynchronous script will be executed before the page load event, but 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 a script with a defer:
 
<Script defer = "defer" src = "main1.js"> </script>
<Script defer = "defer" src = "main2.js"> </script>

The script will be delayed until the document is completely parsed and displayed before execution. The process of loading subsequent document elements will be parallel (asynchronous) with the loading of main. js ). HTML5 specifications require scripts to be executed in the order they appear. Therefore, the first delayed script will be executed before the second delayed script, and the two scripts will be prior to the DOMContentLoaded event. In reality, the delayed script is not necessarily executed in sequence, nor is it necessarily executed before the DOMContentLoaded event is triggered. Therefore, it is best to include only one delayed script.
 
IE4 ~ IE7 also supports the defer attribute of embedded scripts, but IE8 and later versions fully support the behaviors specified by html5.
 
IE4, Firefox 3.5, Safari 5, and Chrome are the first browsers that support the defer attribute. Other browsers ignore this attribute and process the script as usual. Therefore, it is still the best choice to place the delayed script at the bottom of the page.
 
The blue line indicates network reading, and the red line indicates the execution time. These two lines are for scripts. The green line indicates HTML parsing.
 
This figure shows the following key points:
 
Defer and async are the same in network read (download), both of which are asynchronous (compared with HTML parsing)

The difference between the two lies in when the script will be executed after it is downloaded. Obviously, defer is the closest to our requirements for loading and executing the application script.

About defer, this figure does not show that it executes scripts in the order of loading, which should be well exploited.

Async is a master for unordered execution. For it, Script Loading and execution are closely tied, so no matter the declared order, it will be executed immediately after loading.

Think about it. async is not very useful for application scripts because it does not take dependencies into account (even the lowest level of sequential execution) at all ), however, it is very suitable for scripts that do not depend on any script or are not dependent on any script. The most typical example is Google Analytics.

The difference between HTML5 defer and async in this article is that all the content shared by Alibaba Cloud is provided. I hope you can give us a reference and support for the customer's house.

Address: http://www.cnblogs.com/shouce/archive/2016/06/07/5565898.html