async/defer attributes and DOM construction

TOP

About this page

This page shows the orders of script execution and the behavior of DOM construction when the scripts are loaded with or without async/defer attributes.

Each page in the menu, A.js, B.js, C.js adds a text node to the parent <p> element through appendChild() method. The browser takes 3 seconds, 2 seconds, and 1 second to finish loading each script, because those are blocked at the server side.

For a better understanding of these behavior, I picked up some major relevant parts of the document from WHATWG. Please refer to them.

Document types and form of async/defer

Type Form DTD Specifications
HTML 4.01 <script defer …>
HTML 1.0
HTML 1.1
<script defer="defer" …>
HTML 5 <script defer …>
<script async …>

The WHATWG recommendation for async/defer

Overview async/defer attributes in HTML5

The async/defer attributes are boolean attributes that indicate how the script should be executed. Those attributes must not be specified if the src attribute is not present.

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.

The exact processing details for these attributes are, for mostly historical reasons, somewhat non-trivial, involving a number of aspects of HTML. (So,) The implementation requirements are therefore by necessity scattered throughout the specification. The algorithms below (in this section) describe the core of this processing, but these algorithms reference and are referenced by the parsing rules for script start and end tags in HTML, in foreign content, and in XML, the rules for the document.write() method, the handling of scripting, etc.

The defer attribute may be specified even if the async attribute is specified, to cause legacy Web browsers that only support defer (and not async) to fall back to the defer behavior instead of the synchronous blocking behavior that is the default.

Performance Considerations on loading script

If the element has a src content attribute, (…) for performance reasons, user agents may start fetching the script as soon as the src attribute is set in the hope that the element will be inserted into the document.

Specifications about execution orders with defer

If the element has a src attribute, and the element has a defer attribute, and the element has been flagged as parser-inserted, and the element does not have an async attribute, the element must be added to the end of the list of scripts that will execute when the document has finished parsing associated with the Document of the parser that created the element. (note: it means that the order of execution of the script is saved by this list.)

Specifications about execution orders with async

If the element has a src attribute, The element must be added to the set of scripts that will execute as soon as possible of the Document of the script element at the time the prepare a script algorithm started. (note: This set does not save the execution orders of the script.)

Browser Support