The difference between HTML5 defer and async

The main way to insert JavaScript in 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 6 attributes for <script>, including defer and async. Both defer and async are optional and only valid for external script files.

One, when the browser resolves to script scripts without defer or async:

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

The browser immediately loads and executes the specified script, "immediately" before rendering the document element under the script tag, i.e. not waiting for subsequent loaded document elements to be loaded and executed.

Second, when the browser resolves to script scripts, there is async:

<script Async src= "Main.js" ></script>

The browser downloads the script immediately, but does not interfere with other actions on the page, such as downloading additional resources or waiting for other scripts to load. The process of loading and rendering subsequent document elements and the loading and execution of Main.js are performed in parallel (asynchronously).

Async does not guarantee execution in the order in which the scripts appear, so it is important to ensure that they are not dependent on each other, and that the purpose of specifying the async attribute is to not allow the page to wait for two scripts to be downloaded and executed to asynchronously load the rest of the page, suggesting that the asynchronous script do not modify the DOM during loading.

Asynchronous scripts must be executed before the Load event of the page, but may be executed before or after the domcontentloaded event is triggered. Browsers that support asynchronous scripting have Firefox 3.6, Safari 5, and Chrome.

Third, when the browser resolves to script scripts, when there is defer:

<script defer= "defer" src= "main1.js" ></script><script defer= "defer"  src= "Main2.js" ></ Script>

Indicates that the script will be deferred until the document is fully parsed and displayed, and the process of loading subsequent document elements will be executed in parallel (asynchronously) with the main.js load. The HTML5 specification requires scripts to be executed in the order in which they appear, so the first deferred script executes before the second deferred script, and the scripts precede the domcontentloaded event. In reality, deferred scripts are not necessarily executed in sequence or before the domcontentloaded event is triggered, so it is best to include only one deferred script.

IE4~IE7 also supports defer properties for embedded scripts, but IE8 and later versions fully support HTML5-defined behavior.

Ie4,firefox 3.5,safari 5 and Chrome are the first browsers that support defer properties. Other browsers Hu ignores this property and handles the script as usual, so putting the deferred script at the bottom of the page is still the best option.

As shown:

The Blue line represents the network read, the red line represents the execution time, both are for scripting, and the Green Line represents HTML parsing.

This diagram tells us the following points:

1. defer and async in the network read (download) This piece is the same, is asynchronous (compared to HTML parsing)
2. The difference between the two is that when the script finishes downloading, it's clear that defer is closest to our request for application script loading and execution.
3. With regard to defer, the picture is that the script is executed in the order of loading, which is a good use of
4. Async is a random execution of the main, anyway, for it to load and execute the script is next to each other, so no matter what the order of your declaration, as long as it is loaded, it will be executed immediately
5. To think about it,async is not very useful for application scripting because it does not consider dependencies at all (even the lowest order), but it is a good fit for those scripts that can be independent of any script or that are not dependent on any script, the most typical example: Google Analytics

Reference:

JavaScript Advanced Programming

The difference between defer and async http://segmentfault.com/q/1010000000640869

The difference between HTML5 defer and async