Demonstrate DOM events and async/defer features in JavaScript

domevents.html

<!-- 
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>

script1.js

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

script2.js

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

script3.js

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