Demonstrate DOM events and async/defer features in JavaScript
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- | |
This script logs events to the console adding a timestamp | |
This script helps to understand the different states of a document | |
and how async/defer loading tag works | |
This example should run with a webserver, although is plain HTML and JavaScript. | |
If you call it directly with a browser, you may not be able to simulate a real environment | |
1. Create a huge random image like that e.g: | |
php -d memory_limit=1G -r '$x = $y = 500; $im = imagecreatetruecolor($x,$y); for($i = 0; $i < $x; $i++) { for($j = 0; $j < $y; $j++) {$color = imagecolorallocate($im, rand(0,255), rand(0,255), rand(0,255)); imagesetpixel($im, $i, $j, $color); } }; imagepng($im, "sample.png");' | |
2. Create random text to bloat the three script files, copy the output to the script file manually | |
openssl rand -base64 100000 >> bloat.txt | |
--> | |
<script> | |
function log(message) { | |
console.log(Date.now() + ' | ' + message); | |
} | |
log('Start of DOM'); | |
window.onload = function() { | |
log('Event: window.onload'); | |
} | |
document.onload = () => log('window onload'); | |
document.addEventListener("DOMContentLoaded", function(event) { | |
log('Event: document.DOMContentLoaded'); | |
}); | |
document.onreadystatechange = function () { | |
if (document.readyState === "loading") { | |
log('Event: document.readyState === loading'); | |
} | |
if (document.readyState === "interactive") { | |
log('Event: document.readyState === interactive'); | |
} | |
if (document.readyState === "complete") { | |
log('Event: document.readyState === complete'); | |
} | |
}; | |
log("End of first script block"); | |
</script> | |
<script>log("Load first external script");</script> | |
<script src="./script1.js"></script> | |
<script>log("Loaded first external script");</script> | |
<script>log("Load large ressource");</script> | |
<img style="visibility: hidden;" src="./sample.png"/> | |
<script> | |
document.querySelector('img').addEventListener('load', function(){log('Loaded large ressource');}); | |
</script> | |
<script defer>log("Defer load second external script");</script> | |
<script src="./script2.js"></script> | |
<script>log("Defer loaded second external script");</script> | |
<script async>log("Async load third external script");</script> | |
<script src="./script3.js"></script> | |
<script>log("Async loaded third external script");</script> | |
<script>log("End of DOM");</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
log('Will wait for 5 seconds (script 1)'); | |
setTimeout(function(){ | |
log('Waited for 5 seconds (script 1)'); | |
}, 5000); | |
// BLOAT YOUR FILE, SEE DOC IN HTML ABOVE |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
log('Will wait for 5 seconds (script 2)'); | |
setTimeout(function(){ | |
log('Waited for 5 seconds (script 2)'); | |
}, 5000); | |
// BLOAT YOUR FILE, SEE DOC IN HTML ABOVE |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
log('Will wait for 5 seconds (script 3)'); | |
setTimeout(function(){ | |
log('Waited for 5 seconds (script 3)'); | |
}, 5000); | |
// BLOAT YOUR FILE, SEE DOC IN HTML ABOVE |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment