Detailed explanation of the usage of defer attribute and async attribute in Javascript

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 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag at the bottom of the 6c04bd5ca3fcae76e30b72ad730ca86d.

(3) Since each 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag will block page rendering when downloaded, it is recommended to reduce the use of 3f1c4e4b6b16bbbd69b2ee476dc4f83a tags. This is true not only for external link scripts, but also for inline scripts. Every time the browser encounters a 3f1c4e4b6b16bbbd69b2ee476dc4f83a 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:

//外部脚本<script src="1.js" defer></script>//内嵌脚本<script defer>
    console.log("defer");</script>

(2) The 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag with the defer attribute can be placed anywhere on the page, and the corresponding Javascript file will be parsed to the 3f1c4e4b6b16bbbd69b2ee476dc4f83a 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 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag at the bottom of the 6c04bd5ca3fcae76e30b72ad730ca86d.
(3) Since each 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag will block page rendering when downloaded, it is recommended to reduce the use of 3f1c4e4b6b16bbbd69b2ee476dc4f83a tags. This is true not only for external link scripts, but also for inline scripts. Every time the browser encounters a 3f1c4e4b6b16bbbd69b2ee476dc4f83a 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:

//外部脚本<script src="1.js" defer></script>//内嵌脚本<script defer>
    console.log("defer");</script>

(2) The 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag with the defer attribute can be placed anywhere on the page, and the corresponding Javascript file will be parsed to the 3f1c4e4b6b16bbbd69b2ee476dc4f83a 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.

The above is the detailed content of Detailed explanation of the usage of defer attribute and async attribute in Javascript. For more information, please follow other related articles on the PHP Chinese website!