Commonly used script Tags: defer and async

Article Introduction: Our common script tag has two properties related to performance, JS file download execution: Defer and async.

We often use the script tags, there are two and performance, JS file download implementation-related properties: Defer and Async

The meaning of defer "excerpted from Https://developer.mozilla.org/En/HTML/Element/Script"

This "Boolean is" set to indicate to a browser "the script is meant" to "executed after the document has been Parsed.

The meaning of async "excerpted from Https://developer.mozilla.org/En/HTML/Element/Script"

Set this Boolean to indicate the browser should, if possible, execute the script asynchronously.

Defer
For defer, we can think about a situation first. A page if there are n outside the chain of script, put in the head, then, when loading the script will block the page rendering, that is often said blank. In a simple development environment, we may just change the external chain script location in the source code to be OK. But in the face of more and more complex development environment, the front-end colleagues to the background development colleagues to adjust the location of the script, may cost a lot of communication costs and development costs. I encountered this situation in a project last year, and of course I am grateful to the background of the development of colleagues, they have worked hard to adjust the location of the script to solve the blank problem.

So can this cost be reduced to a minimum? So we can use defer this property.

If a script adds the defer attribute, even if it is placed in the head, it will execute after parsing the HTML page, which is similar to putting the script at the bottom of the page.

There are two demos for defer:

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

The following figure is the effect of without_defer.html, from the waterfall chart can be seen, Domready and onload time is around 6s, because it is necessary to wait for 2.php return to render the page. If you visit the above example, you can see that the page to wait for 6s of time will appear, 6s before are blank.

So if we add the defer attribute to each JS, look at the two images below

The first is in the loading process, you can see once the defer property, although there are resources 2.php need to wait, but still will continue to render the page, loading subsequent JS and CSS and other resource files. Compared to the above situation, you can see Domready time is obviously ahead, if you visit the demo address, you will find that the page will be rendered as usual, but the contents of the 2.php will be deferred execution.

From the above comparison can be seen, for defer, we can think of the outside of the chain of JS on the bottom of the page. JS Load does not block the page rendering and resource loading. However, defer will be in accordance with the original JS order, so if there are dependencies before and after the JS can be assured to use.

Async
For async, this is the new attribute in HTML5, which is able to load and execute the script asynchronously, not blocking the loading of the page because of the load script. Once loaded, it will be executed immediately. What's the difference between async and defer? Let's see Async's two demos first.

Without async
With async
The demo has the same effect as described above.

The following figure is the waterfall map of without async, as is the case with no defer. Domready and load time are delayed due to a JS delay.

Let's take a look at the Async property, and like defer, the waiting resource does not block the rest of the resource's load, nor does it affect the loading of the page. But there is a point to note, in the case of async, JS once downloaded well will be executed, so it is probably not in accordance with the original order to execute. If JS has a dependency before and after, with async, it is possible to make mistakes.

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 a optional onload Handler to address the common need to perform initialization which on the script. The difference between async and defer centers around the script is executed. Each async script executes at the the "the" it is finished downloading and before the window ' s Load event. This is means it's possible (and likely) that async scripts are is not executed in the order of which they in the page. The defer scripts, on the other hand, are guaranteed to is executed in the order they in the page. That execution starts after parsing is completely finished, but before the document ' s domcontentloaded event.

Wrapping it Up
On the basis of the above, I summed up the characteristics of defer and async according to the actual use.
Same point:

Page rendering not blocked when loading files
Invalid script for inline
The Document.Write method cannot be invoked in scripts that use these two properties
Scripted OnLoad event callback
Difference points:

The version html4.0 of HTML defines the defer;html5.0 defined in the async
Browser
Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic Support 1.0 1.0 (1.7 or earlier) (supported) (supported) (supported)
Async attribute (supported) 3.6 (1.9.2) 10– (supported)
Defer attribute (supported) 3.5 (1.9.1) 4– (supported)

Execution time
Each script for the Async property executes immediately after it has been downloaded, and is executed before the window's Load event. So it is possible that the sequence of script execution is disrupted; Each defer property script is executed after the page is parsed, in the original order, and before the domcontentloaded of the document.
Excerpted from "Http://dev.w3.org/html5/spec/Overview.html"

There are three possible modes that can is selected using these attributes. If The async is present, then the script'll be executed asynchronously, as soon as it is available. If The async is isn't present but the defer attribute is present, then the script is executed when the page has fi nished parsing. If neither is present, then the script is fetched and executed immediately, before the user agent continues pars ing the page.

In simple terms, there are three possible scenarios for using these two properties

If Async is true, then the script executes asynchronously after the download completes.
If Async is False,defer true, then the script executes after the page parsing is complete.
If both async and defer are false, then the script will stop parsing in the page parsing, download and execute immediately,
Finally give a little personal advice, whether using defer or async properties, you need to first page in the JS file collation, which files have dependencies between, which files can be delayed loading, and so on, do a good job of the JS code merge and split, and then according to the page needs to use these two properties.

This article another links: http://feifeipan.sinaapp.com/?p=51

===== 's gorgeous split line =========

For Znxds's work under IE, I made a comparison between FF and IE6, IE7, IE8 below.

Demo

Firefox, inline defer is ineffective; outer defer is executed at the bottom of the page.

In IE8.0, the defer of inline and outer are in effect and will be deferred to the bottom of the page, followed by other non-defer JS.

IE7.0 the situation, and IE8.0 consistent.

IE6.0, about defer inline JS, to distinguish between the head or in the body. In the head defer inline JS will be in the body after the first execution, and in the body of the defer inline JS will be in the body before the end of the execution; About defer outer JS, is still in the final implementation of the page.

So it can be seen that defer outer JS in a variety of browsers, the performance of the same; defer inline JS in the IE6 is more special, head and body in the order is not the same, IE7 and IE8 will be delayed to the bottom of the page execution, in Firefox invalid.