HTML5 script element Async, defer asynchronous loading usage Introduction

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:

Copy Code code as follows:


<!--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

Copy Code code as follows:


<!--designated defer, the 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:

Copy Code code as follows:


&lt;script Async src= "Myasyncscript.js" onload= "Myinit ()" &gt;&lt;/script&gt;


&lt;script defer src= "mydeferscript.js" onload= "Myinit ()" &gt;&lt;/script&gt;

Scripts for

Async and defer annotations are immediately downloaded without pausing HTML parsing, both of which support the OnLoad event callback to resolve the initialization that is required for the script to perform.
The difference lies in the difference in execution:
The async script executes immediately after the script file has been downloaded, 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.

shows 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.
 
the same example, but this time we specified the defer property of the script. Because when the defer script downloads, other actions can be executed in parallel, so it's about 1 time times faster.
& nbsp
------------------------------------
which browsers support async and defer
are also mentioned in the article cited above:

In addition to the WebKit based new version of browsers, Firefox has been supporting the defer and onload properties for a long time and has added async properties starting with 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 awesome!
See WebKit implementation Async I am so happy that I can't close my 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 the webThe speed of the page.