HTML - Defer attribute

About

defer 1) is an boolean attribute of script element that indicates to the user agent (browser) that it should execute the script:

  • after the DOM has been created (the HTML document read entirely and has been parsed to create the DOM)
  • before firing DOMContentLoaded

The scripts with the defer attribute will then prevent the DOMContentLoaded event from firing.

The script will then not block the parsing and rendering of the HTML document. Its download and execution will happen asynchronously

It's one of the resource fetch instructions.

Demo

This demo shows you the event in order that occurs related to the code.

  • The script that will be loaded with the defer attribute with the domcontentloaded
// simulate code at the DOM content loaded event
document.addEventListener("DOMContentLoaded", function(event) {
    console.log("[5]: 'DOMContentLoaded' event fired");
});
window.addEventListener('load', function(event) {
    console.log("[6]: 'load' event fired");
});;

// Simulate a wait of 5 seconds
console.log("[3]: 'defer' script is executing (after the event listener)");
let now = new Date().getTime();
let end = now;
while(end < now + 5000) {
   end = new Date().getTime();
}
console.log("[4]: 'defer' script execution ended");
  • The HTML page that:
    • loads the script (described above)
    • execute inline javascript (this code will be called first)
<script>console.log('[1]: DOM is build')</script>
<script defer src="/_export/code/web/html/defer?codeblock=0"></script>
<script>console.log('[2]: DOM was parsed')</script>
  • Output:

Async vs Defer

See also the What is the difference between the Async and Defer Script attribute ?

Html Script Async Vs Defer





Discover More
Page Loading Key Moment
Web - Timeline of a page load (Page Speed|Page Latency)

Page load is the latency performance metrics that cumulates: TCP latency (ie how fast, the network will receive the HTTP request and send back the HTTP response ) HTTP latency (ie how fast the web...
HTML - Boolean Attribute

A number of attributes are boolean attributes . The presence of a boolean attribute on an element represents the true value, The absence of the attribute represents the false value. The values...
Browser
What are the asynchronous Media Resource Fetch attribute ?

This page lists all fetch instructions (hint) that can be given to a media resources (stylesheet, script, font, image, ...) in order to speed up the loading of a web page
HTML - crossorigin attribute (CORS policy)

crossorigin is an attribute that set the mode of the request to an HTTP CORS Request. Its value defines further the CORS policy. It can be used on every html elements that fetch resources from a cross-origin...
Html Script Async Vs Defer
What is the difference between the Async and Defer Script attribute ?

The script HTML element has two asynchronous loading method that may be chosen via the presence of the async or defer attribute. Asyncdeferresource fetch instructions In a page load, the following...
What is the script HTML element?

A client-side script is a program that is: linked (server-side script) or directly embedded in an HTML document (in-line script) Scripts in HTML have “run-to-completion” semantics, meaning that...



Share this page:
Follow us:
Task Runner