[Javascript] async attribute of script in HTML5 asynchronously loads JS

HTML4.01 defines five attributes for the script Tag:

Charset is optional. Specifies the character set of the src introduced code. This value is ignored by most browsers.
Optional. Delayed script execution is equivalent to placing the script tag at the bottom of the page body Tag. Other browsers, except IE and Firefox, are not supported.
Language is obsolete. This value is ignored in most browsers.
Src is optional. Specifies the external code file to be introduced without specifying the suffix.
Type is required. Specifies the content type (MIME type) of the script ). In reality, this value is usually not specified. The browser will interpret and execute it as text/javascript by default.
Script attributes in HTML5

In addition to the HTML5 standard attributes, the script tag removes the language attribute and modifies the type attribute to optional (default text/javascript) compared with HTML4.01 ), and added a property async.

Role of async attributes

Specifies whether the script is executed asynchronously. The optional values are true or false.

If async is set to true, the script is parsed and executed during page rendering and display (the browser determines whether the script is available). This is an interesting and practical function.

What is the current script?

1. Place it in the head label. When downloading the external script introduced by the script, the browser is in the blocking status, the network is poor, or the script file is too large, the page is in the blank pause status, the experience is not good enough.

2. put it at the bottom of the page. This is a widely accepted method to improve front-end page performance and experience, but there are still some problems. The script placed at the bottom of the page is to be downloaded and executed after the page document stream is downloaded, the interaction in the page will be implemented with a delay. Although the page display time is shorter, the interaction is delayed. Experience is not good enough.

3. On-Demand execution. Some public scripts are introduced in the head label. After each HTML element needs to be interacted, the script is inserted and executed immediately. scripts that require specific conditions are placed at the bottom of the page. This is not a perfect solution. One is that too many script tags are inserted in the page, causing maintenance inconvenience. The other is that when the script at the bottom is not loaded, the user triggers a certain condition. What should I do? Although there are methods to achieve this, the experience is still not good.

What is changed after the async attribute is supported?

The async attribute solves the above problems, so that we can insert a script in the head tag, download the script and the document at the same time, and execute the script and the document when they are available.

Async and defer

The explanation of the HTML5 manual is excerpted, which is easy to understand:

If the async attribute is true, the script is executed asynchronously relative to the rest of the document, so that the script can continue to be parsed on the page.

If the async attribute is false and the defer attribute is true, the script is executed when the page is parsed.

If the async and defer attributes are both false, the script is executed immediately and the parsing continues after the script is executed.

From Wang defun-chinlang