HTML5 <script> element Async,defer asynchronous loading

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

(Translator's note: defer is recommended, but tested to find that the defer attribute is not valid for script within the page, there is no timing difference. Only valid for external JS files )

One of the reasons I'm excited about HTML5 is that it achieves many of the industry's long-awaited features. We always need the input boxes to show blank hints, but they are all implemented in JavaScript. We also want the whole block to be clickable and to be implemented using JavaScript.
WebKit now implements the async async property of the script tag for HTML5. In the past we used a variety of 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 an async attribute is straightforward:

[HTML]View Plaincopy

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

In fact, if your JavaScript and HTML structure are designed reasonably, then 90% of the cases your script element can use to load asynchronously.

Defer-html Property
Safari Browser added additional defer properties

[HTML]View Plaincopy

1. <!--specify defer, and the effect is about the same as async.
2. <script defer src="sitescript.js" onload="Myinit ()"></script>

The difference between async and defer
WebKit's official blog is a good explanation for the difference between async and defer.

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

Normally, if 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, and the DOM parsing is not resumed until the script is fully downloaded and executed. Like what:
<script src= "Myblockingscript.js" ></script>
The browser is blocked from doing other useful work during the download process, including parsing the HTML, executing other scripts, and showing the CSS layout. Although the WebKit pre-load scanner can be probed for multi-threaded downloads During the download phase, some pages still have a large network latency.
There are a number of techniques currently available to improve page display speed, but both require additional code and tips for specific browsers. Script can now add async or defer properties so that the scripts do not have to be executed synchronously, as in the following example:

[HTML]View Plaincopy

1. <script async  src= "myasyncscript.js"   onload= "Myinit ()" > </script>  
2. <script defer  src= "mydeferscript.js"   onload= "Myinit ()" > </script>  

Both async and defer annotated scripts are not paused for HTML parsing to be downloaded immediately, both support onload event callbacks to resolve the initialization required for the script to execute.
The difference between the two is when the execution is different:
The async script executes immediately after the script file is downloaded, and its execution time must be before the window's Load event is triggered. 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 that the execution time is before the domcontentloaded event of the document is triggered when the DOM parsing is complete.

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

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

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

which browsers support async and defer
Also mentioned in the article cited above:

[Plain]View Plaincopy

1. In addition to the new version of the browser based on WebKit, Firefox has been supporting the defer and onload properties for a long time, and has added the async attribute starting from FF3.6. IE also supports the defer property, but it does not support the Async property, and the OnLoad property will be supported starting with IE9.

The AYNSC is great!

I was so happy to see WebKit implement Async. Blocking is a huge performance bottleneck for every web site, and it is possible to specify that the script file is loaded asynchronously to speed up the Web page.

SOURCE Citation: http://blog.csdn.net/renfufei/article/details/10210949

HTML5 <script> element Async,defer asynchronous loading