[Javascript] The Async property of the script in HTML5 is loaded asynchronously Js__mysql

Async property of script in HTML5 asynchronously load JS

HTML4.01 defines 5 properties for the script tag:

CharSet optional. Specifies the character set in which SRC introduces code, and most browsers ignore the value.
Defer optional. Delaying script execution is equivalent to putting the script tag at the bottom of the page body tag. In addition to IE and newer versions of Firefox, other browsers are not supported.
Language has been abandoned. This value is ignored by most browsers.
Src Optional. Specifies the imported external code file, without limiting the suffix name.
Type must be selected. Specifies the content type (MIME type) of the script. This value is usually not specified in reality, and the browser defaults to the Text/javascript type to interpret execution.
the Script property in HTML5

In addition to having the HTML5 standard attribute in HTML5, the script tag removes the Language property from the HTML4.01, modifies the Type property to optional (default text/javascript), and adds a new property async.

The role of async properties

Defines whether the script executes asynchronously, evaluates to TRUE or FALSE.

Async If you specify true, the script resolves execution during page rendering (the browser determines whether the script is available), which is an interesting and useful feature.

what the script is now.

1, put it in the head tag. When downloading script-introduced external scripts, the browser is blocked, the network is not good or the script file is too large, the page is in a blank pause, the experience is not good enough.

2, put it into the bottom of the page. This is generally recognized to improve the front-end page performance and experience of the method, but there are some problems, placed at the bottom of the page of the script is to wait until the page document down to download, execution, the interaction in the page will have a delay time to achieve. Although the page display time is shorter, but the interaction has been postponed. Experience is not good enough.

3, on-demand implementation. Introduce some common scripts within the head tag, insert the script to execute immediately after each HTML element that needs to interact, and place scripts that require specific conditions to be executed at the bottom of the page. This is not a perfect solution, a page interspersed with too many script tags caused maintenance inconvenience, and then the bottom of the script has not finished loading the user will trigger a condition what to do. Although there are ways to achieve it, the experience is still not good enough.

what changed after supporting the Async property.

The Async property solves these problems so that we can insert the script inside the head tag, and the scripts are downloaded with the document, and the scripts and documents are executed when they are available.

Async and Defer

Excerpt HTML5 manual explanation, very good understanding:

If the Async property is true, the script executes asynchronously relative to the rest of the document, so the script can be executed as the page continues to parse.

If the Async property is false and the defer property is true, the script is executed when the page finishes parsing.

If both the async and defer properties are false, the script executes immediately, and the page continues parsing after the script has finished executing.