Discussion on: CSS, JavaScript, and blocking web page parsing

View post

Replies for: In simple words we must defer the script(s) instead of async if we want them to be executed properly on already LOADED HTML content

You can use async + DOMContentLoaded event.
TL;DR; DOMContentLoaded is event when all html is parsed and is safety manipulated.

So, script is async downloaded and execute waiting DOM is ready

Example:

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Example</title>

    <script async src="./test.js" />
</head>
<body>
    <main>
        <section id="example"></section>
    </main>
    // ...
</body>
</html>

/* test.js */
(() => {
    function run() {
        const example = document.getElementById("example");
        console.log({ example })
        // ...
    }
    window.addEventListener('DOMContentLoaded', run);
})();

More info about event here: developer.mozilla.org/en-US/docs/W...