JavaScript async and defer

By:    Updated: January 23,2017

Deferred Scripts

HTML 4.01 defines an attribute named defer for the <script> element. The purpose of defer is to indicate that a script won't be changing the structure of the page as it executes. As such, the script can be run safely after the entire page has been parsed. Setting the defer attribute on a <script> element signals to the browser that download should begin immediately but execution should be deferred:

<!DOCTYPE html>
<html>
<head>
    <title>Deferred Scripts</title>
    <script type="text/javascript" defer src="valinv_1.js"></script>
    <script type="text/javascript" defer src="valinv_2.js"></script>
</head>
<body>
    <!-- body content -->
</body>
</html>

Even though the <script> elements in this example are included in the document <head>, they will not be executed until after the browser has received the closing </html> tag. The HTML5 specification indicates that scripts will be executed in the order in which they appear, so the first deferred script executes before the second deferred script, and both will execute before the DOMContentLoaded event. In reality, though, deferred scripts don't always execute in order or before the DOMContentLoaded event, so it's best to include just one when possible.

 

As mentioned previously, the defer attribute is supported only for external script files. This was a clarification made in HTML5, so browsers that support the HTML5 implementation will ignore defer when set on an inline script. IE 4–7 all exhibit the old behavior, while IE 8 and above support the HTML5 behavior.

 

Support for the defer attribute was added beginning with IE 4, Firefox 3.5, Safari 5, and Chrome 7. All other browsers simply ignore this attribute and treat the script as it normally would. For this reason, it's still best to put deferred scripts at the bottom of the page.

 

Tips: For XHTML documents, specify the defer attribute as defer="defer".

 

Asynchronous Scripts

HTML5 introduces the async attribute for <script> elements. The async attribute is similar to defer in that it changes the way the script is processed. Also similar to defer, async applies only to external scripts and signals the browser to begin downloading the file immediately. Unlike defer, scripts marked as async are not guaranteed to execute in the order in which they are specified. For example:

<!DOCTYPE html>
<html>
<head>
    <title>Asynchronous Scripts</title>
    <script type="text/javascript" async src="valinv_1.js"></script>
    <script type="text/javascript" async src="valinv_2.js"></script>
</head>
<body>
    <!-- body content -->
</body>
</html>

 

In this code, the second script file might execute before the first, so it's important that there are no dependencies between the two. The purpose of specifying an async script is to indicate that the page need not wait for the script to be downloaded and executed before continuing to load, and it also need not wait for another script to load and execute before it can do the same. Because of this,it's recommended that asynchronous scripts not modify the DOM as they are loading.

 

Asynchronous scripts are guaranteed to execute before the page's load event and may execute before or after DOMContentLoaded. Firefox 3.6, Safari 5, and Chrome 7 support asynchronous scripts.

 

Tips: For XHTML documents, specify the async attribute as async="async".

More in Development Center
New on Valinv
Related Articles
Sponsored Links