There are 3 ways to add script files in our HTML page.
- Using normal script tags without any attributes.
- Using async keyword.
- Using defer keyword.
In all of the above 3 cases, the script tags are placed inside the <head> of the HTML.
To start off, let’s create a boilerplate HTML code with a button inside the <body>.
Next, create a script file (say one.js) and link the external script on the <head> of HTML.
Inside the script file one.js,
- Create a function (say display)
- Inside the function add a
console.log(“hello world”) - Declare a querySelector to access the
<button>from the DOM. - Assign that to a variable (say button) and log it onto the console.
- Now, try to modify the
innerTextof that button. - Last, call the function on top of the script.
Now, in the console we get the following error.
Why did we get the error?
Browser parses the HTML from top to bottom. Here, we have declared our script file on the <head> of HTML. When the parser hits the script tag, the HTML parsing is stopped. The control goes to the script file and the function gets invoked. After the console log gets printed, when it tries to access the button from the DOM, it fails to find it as it is still not rendered yet. Hence, it displays null. And the line for modifying the innerText also throws an error eventually.
In short, the script files block the rendering of the HTML because the parsing happens sequentially.
How to get rid of this error?
Place the script tag at the bottom of the HTML. Now, the script file is accessed and executed at the end after the browser has rendered the entire necessary HTML.
Using async attribute
Place the script tag at the head of the HTML itself. But, now add an attribute named ‘async’ along with the script tag.
Here, we don’t get any errors. This is because adding the async keyword asynchronously fetches the script files as and when the HTML parsing happens. But the HTML parsing resumes only after the script files have finished executing. We cannot predict the speed of execution of script files and rendering of HTML once we add the async keyword.
So when should we avoid using it?
When we want to load multiple script files that have dependency on each other, it might be better if we stay away from using async keywords because the order of execution of scripts is not guaranteed.
So when should we use it?
When we want to load a script which is independent from the rest of the script files added, its okay to use async because the order of execution does not matter.
Using the defer keyword
Place the script tag at the head of the HTML itself. But, now add an attribute named ‘defer’ along with the script tag.
This behaves exactly similar to the situation where we embed the script tag at the bottom of the HTML page.
When defer keyword is used, the script files are fetched parallely with the HTML parsing. And the scripts will be executed only when the HTML parsing is finished.
When should we use it?
We can use it when we want to add multiple script files that are dependent on each other. If we have the habit of embedding script tags at the head section of the HTML page, it would be better to use defer keyword.
Top comments (0)