Introduction to asynchronous loading of HTML5 script elements async and defer

Comments: Asynchronous loading can be understood as non-blocking concurrent processing. In the past, we used various JavaScript techniques to do this. Now WebKit implements async asynchronous attributes of SCRIPT labels for HTML5, if you are interested, you can understand it (Translator's note: asynchronous loading can be understood as non-blocking concurrent processing .)

One of the reasons I'm excited about HTML5 is that it has implemented many industry-long-awaited features. We always need to display a blank prompt in the input box, but it is implemented using JavaScript. We also want the entire block to be clickable, which is also implemented using JavaScript.
Currently, WebKit implements async asynchronous attributes of SCRIPT tags for HTML5. In the past, we used various JavaScript techniques to do this, but now new attributes make blocking easier.

Async-HTML attributes
As I mentioned earlier, adding the async attribute is very simple:

The Code is as follows:
<! -- Specify async and onload callback -->
<Script async src = "siteScript. js" onload = "myInit ()"> </script>

In fact, if your JavaScript and HTML structures are properly designed, your Script elements can be asynchronously loaded in 90% cases.

Defer-HTML attributes
The defer attribute is added to the Safari browser.

The Code is as follows:
<! -- Specify defer, and the effect is similar to that of async -->
<Script defer src = "siteScript. js" onload = "myInit ()"> </script>

Differences between async and defer
The official WebKit blog explains the differences between async and defer.
------------------------------------
Normally, if the browser encounters an external script when parsing the HTML source file, the parsing process is paused and a request is sent to download the script file, DOM parsing continues only after the script is fully downloaded and executed. For example:
<Script src = "myBlockingScript. js"> </script>
During the download process, the browser is blocked from doing other useful work, including parsing HTML, executing other scripts, and displaying CSS la S. Although the Webkit preload scanner can be used to download multiple threads in the download phase, some pages still have a large network latency.
There are many technologies to speed up page display, but they all require additional code and skills for specific browsers. Now, you can add the async or defer attribute to the script so that the script does not need to be executed synchronously. The example is as follows:

The Code is as follows:
<Script async src = "myAsyncScript. js" onload = "myInit ()"> </script>
<Script defer src = "myDeferScript. js" onload = "myInit ()"> </script>

The scripts marked by async and defer are immediately downloaded without pausing HTML Parsing. Both support onload event callback to solve initialization that requires the script to be executed.
The difference between the two lies in the difference in execution:
The async script will be executed immediately after the script file is downloaded, and its execution time must be before the window load event is triggered. This means that multiple async scripts are probably not executed in the order they appear on the page.
In contrast, the browser ensures that multiple defer scripts are executed in order of their appearance on the HTML page, and the execution time is before the DOMContentLoaded event of the document is triggered after DOM Parsing is completed.

The following is an example that takes 1 second to download and 1 second to parse and execute other operations. We can see that loading the entire page takes about 2 seconds.
 
In the same example, the defer attribute of the script is specified this time, because when the defer script is downloaded, other operations can be executed in parallel, so it is about twice faster.
 
------------------------------------
Which browsers support async and defer?
As mentioned in the above reference:

In addition to the new Webkit-based browsers, FireFox has supported the defer and onload attributes for a long time and added the async attribute from FF3.6. IE also supports the defer attribute, but does not support the async attribute. the onload attribute will also be supported from IE9.

Aynsc!
I was so happy to hear that webkit implemented async. Blocking is a huge performance bottleneck for each website, and you can directly specify the asynchronous loading of script files will undoubtedly speed up the web page.