13
document.addEventListener('DOMContentLoaded', () => { 

});

I read that this event listener made sure, for regular scripts, that the JS wasn't going to reference nodes that hadn't been loaded yet. The content executes after DOMContentLoaded has been fired).

I've also read that a module is executed before DOMContentLoaded is fired (due to the defer attribute it has built in).

The modules I've used seem to not need the DOMContentLoaded listener. Can I confirm the DOMContentLoaded listener isn't needed by them to access nodes correctly?

Also, I can't think of how to test this so I'm asking here. If you know how I could, please do share!

2
  • Wouldn't the test be to run your code with and without the event listener to see if it behaves the same?
    – arieljuod
    Aug 17, 2020 at 2:23
  • @arieljuod yeah it does seem to work but the fact that that article said modules are executed before DOMContentLoaded fires spooked me. Can you confirm a module will never need this listener to access nodes? Aug 17, 2020 at 3:15

2 Answers 2

5
+50

I think this article should clear things for you, it has great pictures https://flaviocopes.com/javascript-async-defer/#the-position-matters

When defer is present, it specifies that the script is executed when the page has finished parsing, therefore you can guarantee that the script gets access to the nodes without DOMContentLoaded

1
  • 1
    This articule is great for understanding the defer and async attributes on a legacy script but doesn't cover the more modern type="module" scripts. May 28, 2023 at 12:53
4

When using defer, the scripts will indeed execute after the page has been fully downloaded in the order that they appeared.

You can see here a schema representing the behavior.

enter image description here

enter image description here

enter image description here

In any case, scripts are always executed before DOMContentLoaded, you can test that theory here :

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>

<script type="text/javascript">
  document.addEventListener('DOMContentLoaded', () => {
    alert("Alert from script")
  });
  $(document).ready(function() {
    alert("Alert from jQuery")
  });
</script>

<!-- Alerts "Alert from defer -->
<script defer="defer" type="text/javascript" src="https://pastebin.com/raw.php?i=5tF5s4mB"></script>

And unless you remove the alert from the ready state, all scripts will execute before them, otherwise they get executed in the order they appear in the DOM.

So you can be sure that all code inside DOMContentLoaded will be able to access the fully loaded DOM.

On an end note, do watch out of defer's compatibility across all browsers.

Script attributes async and defer, don’t block DOMContentLoaded. JavaScript modules behave like defer, they don’t block it too.

This can be tested using type="module"

<script type="module">
  alert("Alert from script")
</script>

<script type="text/javascript">
  alert("Page loaded")
</script>

As you can see, the page loads before executing any modules, no matter the order.

2
  • 1
    Thanks @IslamElshobokshy. Good link you shared. But my question was specifically: can I confirm modules don't need the DOMContentLoaded event (like I was shown scripts need to) to access all the nodes fine? Aug 17, 2020 at 15:16
  • 1
    As he (well) explained, you can see you don't need to use the DOMContentLoaded event.
    – NoxFly
    Jan 28, 2022 at 10:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.