HTML5 <script> element Async,defer asynchronous loading

The appearance of the async and deferred attributes of HTML5 is a boon for the first rendering of the page, solves the blocking problem when loading JS files, and implements the async async attribute of the script tag. 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:

<!--Specify async, and onload callback--<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

<!--Specify defer, and the effect is about the same as async. <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:

<script async src="myasyncscript.js" onload="Myinit ()"></script >

<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 takes 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 seconds faster:

which browsers support async and defer?

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.

I was so happy to see WebKit implement Async. For each site, blocking is a huge performance bottleneck, and you can directly specify that the script file asynchronous loading will undoubtedly speed up the Web page, greatly improving the user's experience of waiting for the page.

HTML5 <script> element Async,defer asynchronous loading