Defer and async of the script

Our commonly used script tag has two attributes related to performance and JS file download and execution: Defer and async.

Description of defer [from https://developer.mozilla.org/en/html/element/script]

This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed.

Definition of async [from https://developer.mozilla.org/en/html/element/script]

Set this Boolean attribute to indicate that the browser shoshould, if possible, execute the script asynchronously.

Defer

For defer, We can first consider a situation. If a page contains N external link scripts and is placed in the head, page rendering will be blocked when the script is loaded, that is, the blank space. In a simple development environment, we may just replace the external link script bit in the source code. However, in the face of more and more complex development environments, front-end colleagues may spend a lot of communication and development costs if they want to adjust the script position in the background. I met this kind of situation in a project last year. Of course, I am very grateful to the background development colleagues for their cooperation. They have worked hard to adjust the script position, solved the blank problem.

Can this cost be minimized? We can use the defer attribute.

If a script is added with the defer attribute, even if it is placed in the head, it will be executed after the HTML page is parsed, which is similar to placing the script at the bottom of the page.

Defer has two demos:

· Without defer

· With defer

A brief introduction to this demo, a total of 3 JS and 1 CSS, in order to better display the effect of defer, the second js-2.php is delayed 3 seconds to return. 1. js will generate an input box with a value of 1 on the page, 2. php will generate an input box with a value of 2, and 3. js will generate an input box with a value of 3. On the one hand, we need to observe the page rendering time, and on the other hand, we also need to check whether JS is executed sequentially.

It is the effect of without_defer.html. From the waterfall chart, we can see that the domready and onload time are around 6 s, because the page can be rendered only after the result of 2. php is returned. If you visit the example above, we can see that the page will not be displayed until 6 s, and it will be blank before 6 s.

If we add the defer attribute to each JS, see the following two figures.

The first one is intercepted during the loading process. We can see that once the defer attribute is available, although there are resources 2. PHP needs to wait, but it will still render the page and load subsequent resource files such as JS and CSS. Compared with the above situation, we can see that the domready time is significantly ahead of schedule. If you visit the demo address, the page will be rendered as usual, but the content in 2. php will be delayed.

From the comparison above, we can see that for defer, we can think that the Js of the external chain is placed at the bottom of the page. JS loading does not block page rendering and resource loading. However, defer will execute in the original JS order, so you can use JavaScript with dependency before and after it.

Async

For async, this is a new attribute in HTML5. It can load and execute scripts asynchronously without blocking page loading. Once loaded, it will be executed immediately. So what is the difference between async and defer? Let's take a look at two demos of async.

· Without async

· With async

The demo has the same effect as described above.

It is the waterfall map of without async, which is the same as that without defer. Both domready and load time are delayed due to a JS delay.

Let's take a look at the situation with the async attribute. Like defer, the resources that will wait will not block loading of other resources, nor affect page loading. However, it is worth noting that in the case of async, JS will be executed once downloaded, so it is likely not executed in the original order. If Javascript is dependent on the frontend and backend, async may cause errors.

Difference

This article summarizes the similarities and differences between defer and async.

Both async and defer scripts begin to download immediately without pausing the parser and both support an optional onload handler to address the common need to perform initialization which depends on the script. the difference between async and defer centers around when the script is executed. each async script executes at the first opportunity after it is finished downloading and before the window's load event. this means it's possible (and likely) thatasync scripts are not executed in the order in which they occur in the page. the defer scripts, on the other hand, are guaranteed to be executed in the order they occur in the page. that execution starts after parsing is completely finished, but before the document 'sdomcontentloaded event.

Wrapping it up

Based on the above, I summarized the features of defer and async based on the actual usage.

Similarities:

· Page rendering is not blocked when files are loaded

· Invalid inline script

· The document. Write method cannot be called in scripts using these two attributes.

· Event Callback for onload with scripts

Differences:

·HtmlVersionDefer is defined in html4.0; async is defined in html5.0

·Browser

Feature	Chrome	Firefox (gecko)	Internet Explorer	Opera	Safari
Basic Support	1.0	1.0 (1.7 or earlier)	(Supported)	(Supported)	(Supported)
Asyncattribute	(Supported)	3.6 (1.9.2)	10	-	(Supported)
Deferattribute	(Supported)	3.5 (1.9.1)	4	-	(Supported)

·Execution time
The script for each async attribute is executed immediately after it is downloaded and before the window load event. Therefore, the script execution sequence may be disrupted. Each defer attribute script is executed in the original order after the page is parsed, and will be executed before domcontentloaded of the document.

From [http://dev.w3.org/html5/spec/overview.html?attr-script-async]

There are three possible modes that can be selected using these attributes. if the async attribute is present, then the script will be executed asynchronously, as soon as it is available. if the async attribute is not present but the defer attribute is present, then the script is executed when the page has finished parsing. if neither attribute is present, then the script is fetched and executed immediately, before the user agent continues parsing the page.

Simply put, there are three possibilities for using these two attributes.

· If async is true, the script is executed asynchronously after the download is complete.

· If async is false and defer is true, the script will be executed after page parsing.

· If both async and defer are false, the script will stop page resolution in page parsing and download and execute immediately,

Finally, I would like to give you some personal suggestions. No matter whether you use the defer or async attributes, you must first sort out the JS files on the page, which files are dependent on each other, and which files can be loaded with delay, merge and split js code, and then use these two attributes as needed on the page.

Another link: http://feifeipan.sinaapp.com /? P = 51