JavaScript

JavaScript Defer Attribute

If you have ever searched for web-development or website designing, then chances are you have probably heard about HTML. Well, HTML stands for “Hyper-Text-Markup-Language”. HTML is used in combination with CSS to develop attractive and responsive web pages. JavaScript is a programming language that enables our web pages and web applications to think and act and make our web applications interactive. The entire HTML document is scanned by the browser first for CSS, JavaScript, or any other referenced material such as an image and this process is called HTML parsing. The web browser then requests each of the resource files from the server if resources are found in the HTML. Once the web browser has all of the necessary resources, it begins constructing the page.

JavaScript can be referenced by the script tag of HTML and JavaScript is called a parser blocking resource because HTML parsing is blocked by JavaScript. To solve this problem the script tag of HTML offers us async and defer attributes hence allowing us to have more control over how and when external files are retrieved and executed. In this post, we will explore what JavaScript Defer Attribute is and how we can use the defer attribute.

Normal Execution

Let’s have a look at the impact of what happens when the defer attribute is not there. JavaScript files, by default, will pause the parsing of the HTML text so that they can be fetched (if not inline) and run.

Let’s say we have a script tag somewhere in the middle of an HTML page and there is HTML code above and below the script tag:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<body>

<!-- Some code above -->

<script src="code.js"></script>

<!-- Some code below -->

</body>

</html>

The HTML parser will scan this page and when it reaches the script tag it will pause the HTML parsing and fetch the JavaScript code.js file in the script tag and then execute that file. Once the execution and fetching of the JavaScript file are complete, only then the HTML parsing continues again. This process delays the rendering of HTML and hence slows our webpage by taking some time to fully load the web page.

What is the Defer attribute?

The defer property can only have a true value or a false value, we can conclude that it is a boolean attribute. It is an attribute that is used only for external scripts. If this property is used, it defines that the browser should not wait for the script to load. Meaning, in some cases, external scripts can take a lot of time to load, this property simply says to load the document before loading in the script. In simple words, the defer attribute does not wait for the script tag and the processing of HTML continues hence making our webpage increase loading performance. The syntax for defer attribute is:

<script defer src="code.js"></script>

It should be noted that the defer attribute can only be applied to external sheets/scripts when the src attribute is present in the script tag. It should also be noted that defer attribute cannot be applied to inline code.

The defer attribute is similar to the asynchronous process, that is you can move to another task even when the first task isn’t completed.

Example

We are using an external JavaScript sheet with the name of code.js:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<body>

<p>Before Script</p>

<script defer src="code.js"></script>

<p>After Script: will execute immediately</p>

</body>

</html>

We initiated a p tag and then a script tag which references the code.js file and then again a p tag.

In the code.js file, we simply console.log Hello World!:

console.log("Hello World!");

We will see the following output:

Browser Supportability

The numbers given in the table indicate which browser version was the first to implement the attribute completely.

Attribute Mozilla Firefox Microsoft edge Google Chrome Opera Safari
defer 3.5 10.0 8.0 15.0 5.0

Conclusion

Normal execution of HTML is blocked when there is a script tag. Script tag fetches an external file or link and then executes it hence blocking the normal parsing of HTML. The defer attribute is the solution as defer attribute will help us download our scripts as soon as possible without blocking the browser/HTML as it tells the browser not to wait for the script tag. In this post, defer attribute in JavaScript was discussed along with an example and the browser supportability.

About the author

Shehroz Azam

A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.