Detailed explanation of the usage of defer attribute and async attribute in Javascript-JS Tutorial-php.cn

This article brings you a detailed explanation of the usage of defer attributes and async attributes in Javascript. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Why it is necessary to load js files asynchronously:

If asynchronous is not used, the document will block the download of other resources when loading js code, resulting in a blank page.

(1) When executing the js script placed at the top, the browser needs time to download the code of the external link file and execute it. This will cause an obvious delay and display a blank page, making the user unable to browse. content and cannot interact with the page.

(2) Although IE8, Firefox3.5, Safari4, and Chrome2 all allow parallel downloading of Javascript files, and the downloading process of the scripts will not affect each other, the loading of the page still needs to wait until all Javascript codes are downloaded and executed. to continue. Because of this, it is recommended to place the tag at the bottom of the .

(3) Since each tag will block page rendering when downloaded, it is recommended to reduce the use of tags. This is true not only for external link scripts, but also for inline scripts. Every time the browser encounters a tag when parsing the HTML page, it will cause a certain delay due to the execution of the script. Additionally, given the additional performance overhead imposed by HTTP requests, downloading a single 100KB file will be faster than downloading four 25KB files.

Usage of defer and async:

Same points: defer and async are both used to load scripts asynchronously. Using parallel downloading, there will be no blocking during the downloading process.

Differences:

defer:

(1) can be used to load external scripts or embedded scripts. Inline scripts are limited to IE9 and below. Mainstream browsers are based on the W3C's HTML5 specification: defer only takes effect when the src attribute is declared.

For example:

//外部脚本 //内嵌脚本 console.log("defer"); Copy after login Copy after login (2) The tag with the defer attribute can be placed anywhere on the page, and the corresponding Javascript file will be parsed to the tag on the page The download starts but will not be executed. It will be executed after the DOM loading is completed (called before the onload event).

async:

(1) Only used for external scripts.

(2) Execute immediately after async loading is completed.

Attachment: For details on browser support for the defer attribute, please see: https://caniuse.com/#feat=script-defer, just search for defer.

Why it is necessary to load js files asynchronously:

If asynchronous is not used, the document will block the download of other resources when loading js code, resulting in a blank page.

(1) When executing the js script placed at the top, the browser needs time to download the code of the external link file and execute it. This will cause an obvious delay and display a blank page, making the user unable to browse. content and cannot interact with the page. (2) Although IE8, Firefox3.5, Safari4, and Chrome2 all allow parallel downloading of Javascript files, and the downloading process of the scripts will not affect each other, the loading of the page still needs to wait until all Javascript codes are downloaded and executed before it can continue. Because of this, it is recommended to place the tag at the bottom of the . (3) Since each tag will block page rendering when downloaded, it is recommended to reduce the use of tags. This is true not only for external link scripts, but also for inline scripts. Every time the browser encounters a tag when parsing the HTML page, it will cause a certain delay due to the execution of the script. Additionally, given the additional performance overhead imposed by HTTP requests, downloading a single 100KB file will be faster than downloading four 25KB files.

Usage of defer and async:

Same points: defer and async are both used to load scripts asynchronously. Using parallel downloading, there will be no blocking during the downloading process.

Differences:

defer:

(1) can be used to load external scripts or embedded scripts. Inline scripts are limited to IE9 and below. Mainstream browsers are based on the W3C's HTML5 specification: defer only takes effect when the src attribute is declared.

For example:

//外部脚本 //内嵌脚本 console.log("defer"); Copy after login Copy after login (2) The tag with the defer attribute can be placed anywhere on the page, and the corresponding Javascript file will be parsed to the tag on the page The download starts but will not be executed. It will be executed after the DOM loading is completed (called before the onload event).

async:

(1) For external scripts only.

(2) Execute immediately after async loading is completed.

Attachment: For details on browser support for the defer attribute, please see: https://caniuse.com/#feat=script-defer, just search for defer.

The above is a detailed introduction to the usage of defer attribute and async attribute in Javascript. If you want to know more about JavaScript video tutorial , please pay attention to the PHP Chinese website.