Introduction to the use of HTML5 script elements async and defer asynchronous loading_html5 tutorial skills

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

One of the reasons why I am so excited about HTML5 is that it implements many long-awaited features in the industry. We have always needed the input box to display a blank prompt, but it is all implemented using JavaScript. We also want to make the entire block clickable, again using JavaScript.
WebKit now implements the async attribute of the SCRIPT tag for HTML5. In the past we used various JavaScript tricks to do this kind of thing, but now new properties make it relatively easy to prevent blocking.

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

In fact, if your JavaScript and HTML structures are designed reasonably, then in 90% of cases your Script elements can Use asynchronous loading.

defer - HTML attribute
Safari browser adds an additional defer attribute


The difference between async and defer
WebKit official blog explains the difference between async and defer very well
----- ----------------------------------
Under normal circumstances, when the browser is parsing the HTML source file, if it encounters External script, then the parsing process will be paused and a request will be sent to download the script file. DOM parsing will continue only after the script is completely downloaded and executed. For example:

During the download process the browser is blocked from doing other useful work, including parsing HTML, executing other scripts, and Display CSS layout. Although the Webkit preload scanner can detectively perform multi-threaded downloads during the download phase, some pages still experience significant network latency.
There are currently many techniques to improve page display speed, but they all require additional code and browser-specific techniques. Now, scripts can add async or defer attributes so that the script does not have to be executed synchronously. The example is as follows:


Scripts marked with async and defer will be downloaded immediately without pausing HTML parsing. Both support onload event callbacks to solve the need This script performs the initialization.
The difference between the two lies in the execution time:
The async script will be executed 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 will most likely not be executed sequentially in the order they appear on the page.
In contrast, the browser ensures that multiple defer scripts are executed sequentially in the order they appear in the HTML page, and the execution time is after the DOM parsing is completed and before the DOMContentLoaded event of the document is triggered.

The following shows an example that takes 1 second to download and 1 second to parse and perform other operations. We can see that the entire page takes about 2 seconds to load.

Same example, but this time we specify the defer attribute of the script. Because when the defer script is downloaded, other operations can be executed in parallel, so it is about 1x faster.

---------------------------------------------
Which views The browser supports async and defer
It is also mentioned in the article cited above:

In addition to the new version of the browser based on Webkit, FireFox has supported the defer and onload attributes for a long time, and since FF3.6 The async attribute has been added. IE also supports the defer attribute, but does not yet support the async attribute. Starting from IE9, the onload attribute will also be supported.

aynsc Great!
I was so happy to see webkit implement async. For every website, blocking is a huge performance bottleneck, and being able to directly specify script files to load asynchronously will undoubtedly speed up the web page.