Shulou(Shulou.com)05/31 Report--

Today, the editor will share with you the relevant knowledge points about the difference between defer and async in HTML5. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article.

The main way to insert Javascript in a HTML page is to use elements. 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, including defer and async. Both defer and async are optional and are valid only for external script files.

1. When the browser parses to the script script without defer or async:

The browser loads and executes the specified script immediately. "immediately" means loading and executing the document elements under the script tag before rendering them, that is, without waiting for the document elements to be loaded later.

2. When the browser parses to the script script and has async:

The browser downloads the script immediately, but does not interfere with other actions on the page, such as downloading other resources or waiting for other scripts to load. The process of loading and rendering subsequent document elements and the loading and execution of main.js occur in parallel (asynchronously).

Async is not guaranteed to be executed in the order in which the scripts appear, so it is important to ensure that the two are not dependent on each other before. The purpose of specifying the async attribute is not to make the page wait for the download and execution of two scripts, thus loading the rest of the page asynchronously. It is recommended that asynchronous scripts do not modify DOM during loading.

Asynchronous scripts must be executed before the page's load event, but may be executed before or after the DOMContentLoaded event is triggered. Browsers that support asynchronous scripting include Firefox 3.6, Safari 5, and Chrome.

3. When the browser parses to the script script and has defer:

Indicates that the script will be delayed until the document is fully parsed and displayed, and the loading of subsequent document elements will occur in parallel with the loading of the main.js (asynchronously). The HTML5 specification requires scripts to be executed in the order in which they appear, so the first deferred script executes before the second deferred script, and these two scripts precede the DOMContentLoaded event. In reality, deferred scripts are not necessarily executed sequentially, nor are they necessarily executed before DOMContentLoaded events are triggered, so it is best to include only one deferred script.

IE4~IE7 also supports the defer attribute for embedded scripts, but IE8 and later versions fully support the behavior specified by HTML5.

IE4,Firefox 3.5 Magi Safari 5 and Chrome are the first browsers to support the defer attribute. Other browsers ignore this attribute and handle scripts as usual, so putting deferred scripts at the bottom of the page is still the best choice.

The blue line represents the network read, the red line represents the execution time, both of which are for scripts, and the green line represents HTML parsing.

This figure tells us the following points:

Defer and async are the same in network reading (downloading), both are asynchronous (compared to HTML parsing)

The difference between the two is when the script will be executed after downloading. Obviously, defer is closest to our requirements for application script loading and execution.

With regard to defer, the inadequacy of this diagram is that it executes scripts in the loading order, which should be taken advantage of.

Async is a master of out-of-order execution. Anyway, for it, the script is loaded and executed next to each other, so no matter what the order you declare, it will be executed as soon as it is loaded.

When you think about it, async is not very useful for application scripts because it does not consider dependencies (even the lowest sequential execution), but it is very appropriate for scripts that can or are not dependent on any script. the most typical example: Google Analytics.

These are all the contents of this article entitled "what's the difference between defer and async in HTML5". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.