Menu
I am trying to understand defer with a simple example. I have the below JS code which takes 5 seconds to run.
home.js
function wait(ms){
var start = new Date().getTime();
var end = start;
while(end < start + ms) {
end = new Date().getTime();
}
}
wait(5000);
I am using this in home.html as shown below:
<html>
<head>
<script defer src="home.js"></script>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
I find that if use defer or put my script at the end of body tag ( in my understanding both are equivalent), hello world appears only after 5 seconds. But if I use asnyc 'hello world' appears immediately. Why is this?
876
To answer your immediate question, the Script Element documentation on MDN will help.
Defer:
Scripts with the defer attribute will prevent the DOMContentLoaded event from firing until the script has loaded and finished evaluating.
Async:
This is a Boolean attribute indicating that the browser should, if possible, load the script asynchronously.
An async script will not hold up the DOMContentLoaded event from firing.
There are several better ways of causing dom content to appear after a delay that will not block the UI thread like you are doing; this is a very bad practice.
An extract from DOMContentLoaded:
Synchronous JavaScript pauses parsing of the DOM. If you want the DOM to get parsed as fast as possible after the user has requested the page, you can make your JavaScript asynchronous
The normal practice would be to append dom content after the document is loaded. You could still do this with a timeout but usually the additional dom content would be loaded after some other asynchronous action like a response received from fetch.
Here is an example of appending dom content after a delay:
function wait(ms){
window.setTimeout(function() {
var element = document.createElement("h1")
element.innerText = "Hello World!"
document.body.appendChild(element)
}, ms)
}
wait(5000);<html>
<head>
<script src="home.js"></script>
</head>
<body>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
