HTML5

Original address: html5′s async Script Attribute
Original date: September 22, 2010
Translation Date: August 22, 2013

(Translator note: Asynchronous loading can be understood as non-blocking concurrency processing.)

(Translator Note: the recommended use of defer, but the test found that the defer property on the page script is invalid, there is no time difference. Only the external JS file takes effect )

One of the reasons I am excited about HTML5 is that it has achieved many of the industry's long-awaited features. We always need the input box to display blank hints, but they are all implemented in JavaScript. We also want the entire block to be clickable, and also to be implemented using JavaScript.
WebKit now implements the async asynchronous property of the script label for HTML5. In the past we used various JavaScript techniques to do this, but now the new attributes make it relatively easy to prevent blocking.

async-html Property

As I mentioned earlier, adding the Async property is very simple:

<!--specify async, and onload callback-->
<script async src= "Sitescript.js" onload= "Myinit ()" ></script>

In fact, if your JavaScript and HTML structure is reasonable, then 90% of the cases your script element can be loaded using asynchronous.

defer-html Property
Safari Browser added the Defer property

<!--specify defer, effect and async almost--> <script defer src= "sitescript.js"
onload= "Myinit ()" ></script>

the difference between async and defer
WebKit Official Blog Well explains the difference between async and defer.

------------------------------------

Normally, when the browser encounters an external script when parsing an HTML source file, the parsing process pauses and sends a request to download the script file, which continues to perform only after the script has been completely downloaded and executed. Like what:
<script src= "Myblockingscript.js" ></script>
Browsers are blocked from doing other useful work during the download process, including parsing HTML, executing other scripts, and displaying CSS layouts. Although the WebKit preload scanner can be probed for multi-threaded downloads during the download phase, some pages still have a large network latency.
There are many techniques currently available to increase the speed of page display, but all require additional code and techniques for specific browsers. The script can now add async or defer properties to let the scripts do not have to be synchronized, as shown in the following example:

<script Async src= "Myasyncscript.js" onload= "Myinit ()" ></script>
<script defer src= " Mydeferscript.js "onload=" Myinit () "></script>

Scripts that async and defer annotations do not pause HTML parsing and are immediately downloaded, both of which support the OnLoad event callback to resolve the initialization required for the script to perform.
the difference between the two lies in the difference between execution：
The async script executes immediately after the script file download completes, and its execution time must precede the window's Load event. This means that multiple async scripts are likely not to be executed in the order in which they appear in the page.
In contrast, the browser ensures that multiple defer scripts are executed sequentially in the order in which they appear in the HTML page, and before the domcontentloaded event of the document is triggered, after Dom parsing completes.

Here's an example that takes 1 seconds to download and 1 seconds to parse through other operations, and we can see that the entire page load takes about 2 seconds.

Same example, but this time we specified the defer property of the script. Because when the defer script is downloaded, other actions can be executed in parallel, so it's about 1 time times faster.

------------------------------------

which browsers support async and defer
It is also mentioned in the article cited above:

In addition to the new version of browsers based on WebKit, Firefox has been supporting the defer and onload properties for a long time and has added async properties from FF3.6. IE also supports the Defer property, but the Async property is not supported, and the onload attribute is also supported from IE9 onwards.

the AYNSC is wonderful.
See WebKit realize Async I am happy to close the mouth. Blocking is a huge performance bottleneck for every web site, and the ability to directly specify a script file for asynchronous loading will undoubtedly speed up Web pages.