We know that every line of code in HTML executes in the order in which they are written.
What if we have a huge javascript code or script in the head tag ? This would take a lot of time to load it. Time to Interactivity increases.
What if we want to execute javascript after the HTML elements are rendered ? If the JavaScript code is parsed before the HTML you are trying to do something to, then it's a problem.
In the previous chapter, in the internal and external examples, when the JavaScript is loaded and run in
the
<head> of the document, before the HTML body is parsed. This could cause an error,
according to the above point we discussed, so
let us use some technique to solve this issue.
For Internal Method
The above code is an event listener, which listens for the browser's "DOMContentLoaded"
event.
"DOMContentLoaded" event means that
the HTML body is completely loaded and parsed. The JavaScript inside this block will not run until after
that event is fired, therefore the error is avoided.
For External Method
Defer
We use a more modern JavaScript feature to solve the problem, the defer
attribute, which tells the browser to continue downloading the HTML content once the
<script>
tag element is encountered.
So we know that, in the above code, both the script and the HTML will load simultaneously and the code will work.
Scripts loaded using the defer attribute will run in the order they appear in the page and
execute them as soon as the script and content are downloaded.
They won't run until the page content has all loaded, which is useful if your scripts depend on the DOM being in place (e.g. they modify one of more elements on the page).
Async
Scripts loaded using the async attribute will download the script without blocking rendering
the page and will execute it as soon as the script finishes downloading.
You get no guarantee that scripts will run in any specific order.
But it is that they will not stop the rest of the page from displaying/rendering.
It is
best to use async when the scripts in the page run independently from each other and depend
on no other
script on the page.
Note: In the external case, we did not need to use the DOMContentLoaded event because
the defer
attribute
solved the problem for us. We didn't use the defer solution for the internal JavaScript example because
defer only works for external scripts.
Also to be noted
An old-fashioned solution to this problem is to put your script element right at the
bottom of the
body (e.g. just before the
</body> tag), so that it would load after all the HTML has been parsed.
The problem with this solution is that loading/parsing of the script is completely blocked until the HTML DOM has been loaded. On larger sites with lots of JavaScript, this can cause a major performance issue, slowing down your site.
To summarize:
-
asyncanddeferboth instruct the browser to download the script(s) in a separate thread, while the rest of the page (the DOM, etc.) is downloading, so the page loading is not blocked by the scripts. - If your scripts should be run immediately and they don't have any dependencies, then use async.
-
If your scripts need to wait for parsing and depend on other scripts and/or the DOM being in place, load
them using
deferand put their corresponding<script>elements in the order you want the browser to execute them.
