Differences between HTML5 defer and async

Differences between HTML5 defer and async
The main method to insert Javascript into an HTML page is to use the <script> element. This element was created by Netscape and first implemented in Netscape Navigator 2. Later, this element was added to the formal HTML specification. HTML4.01 defines six attributes for <script>, including defer and async. Defer and async are both optional and only valid for external script files. 1. When the browser parses the script without defer or async: <script src = "main. js "> </script> the browser loads and executes the specified script immediately." immediate "indicates that the file element under the script tag is rendered, that is to say, if you do not wait for subsequent loading of document elements, you can load and execute the elements when you read them. 2. When the browser parses the script with async: <script async src = "main. js "> </script> the browser immediately downloads the script, but does not impede other operations on the page, such as downloading other resources or waiting to load other scripts. The process of loading and rendering subsequent document elements and the loading and execution of main. js are parallel (asynchronous ). Async is not necessarily executed in the order in which the script appears. Therefore, it is important to ensure that the two are independent from each other before. The async attribute is specified to prevent the page from waiting for the download and execution of the two scripts, to load other page content asynchronously, we recommend that you do not modify the DOM during loading. The asynchronous script will be executed before the page load event, but may be executed before or after the DOMContentLoaded event is triggered. Browsers that support asynchronous scripts include Firefox 3.6, Safari 5, and Chrome. 3. When the browser parses a script with a defer: <script defer = "defer" src = "main1.js"> </script> <script defer = "defer" src = "main2.js"> </script> indicates that the script will be delayed the document is completely parsed and displayed before execution, the process of loading subsequent document elements will be. js loading in parallel (asynchronous ). HTML5 specifications require scripts to be executed in the order they appear. Therefore, the first delayed script will be executed before the second delayed script, and the two scripts will be prior to the DOMContentLoaded event. In reality, the delayed script is not necessarily executed in sequence, nor is it necessarily executed before the DOMContentLoaded event is triggered. Therefore, it is best to include only one delayed script. IE4 ~ IE7 also supports the defer attribute of embedded scripts, but IE8 and later versions fully support the behaviors specified by html5. IE4, Firefox 3.5, Safari 5, and Chrome are the first browsers that support the defer attribute. Other browsers ignore this attribute and process the script as usual. Therefore, it is still the best choice to place the delayed script at the bottom of the page. The blue line indicates network reading, and the red line indicates the execution time. These two lines are for scripts. The green line indicates HTML parsing. This figure shows the following points: defer and async are the same in terms of Network Reading (downloading) and are both asynchronous (compared with HTML parsing) the difference between the two lies in when the script will be executed after it is downloaded. Obviously, defer is the closest to our requirements for loading and executing application scripts, the figure shows that the script is executed in the order of loading. To do this, the use of async is an execution master in disorder, for it, Script Loading and execution are closely tied, so whatever the order you declare, as long as the script is loaded, it will be executed immediately, async is not very useful for application scripts because it does not fully consider dependencies (even the lowest level of sequential execution ), however, it is very suitable for scripts that do not depend on any script or are not dependent on any script. The most typical example is Google Analytics.