I thought I knew how to use 'defer' attribute when referencing external scripts from my HTML pages. I even thought there is no reason for me NOT to use it. But after a couple of unexpected things I started to research (even here) and I think I'm not 100% sure when it's safe to use it every time I use the script tag.

Is there somewhere a list of known use cases when defer should NOT be used?

I thought I knew how to use 'defer' attribute when referencing external scripts from my HTML pages. I even thought there is no reason for me NOT to use it. But after a couple of unexpected things I started to research (even here) and I think I'm not 100% sure when it's safe to use it every time I use the script tag.

Is there somewhere a list of known use cases when defer should NOT be used?

• javascript
• performance

2 Answers 2

The only thing defer does is run your script when the DOM has finished parsing, but before the DOMContentReady event is fired off.

So: if your code does not depend on the DOM (directly, or indirectly through access to document properties that can only be determined once the DOM is done), there is no reason to defer. For example: a utility library that adds a new namespace ComplexNumbers, with a ComplexNumber object type and associated utility functions for performing plex number maths, has no reason to wait for a DOM: it doesn't need to be deferred. Same for a custom websocket library: even if your own use of that library requires performing DOM updates, it does not depend on the DOM and doesn't need defer.

But for any code that tries to access anything related to the DOM: you need to use defer. And yes: you should pretty much have defer on any script that loads as part of the initial page load, and if you did your job right, none of those scripts interfere with each other when they try to touch the various pieces of the DOM they need to work with.

In fact, you should have both defer *and* async, so as not to block the page thread. The exception being if you're loading a type="module" script, in which case you don't get a choice in deferral: it's deferred by default. but it'll still need async.

DOMContentReady doesn't exist.

I added defer attribute to some external JS

And then I put my code inside

document.addEventListener('DOMContentLoaded', function() {
})

And I get a reference invalid when I try to use methods from the external JS.

https://developer.mozilla/en-US/docs/Web/API/Document/DOMContentLoaded_event

The DOMContentLoaded event fires when the HTML document has been pletely parsed, and all deferred scripts ( and ) have downloaded and executed. It doesn't wait for other things like images, subframes, and async scripts to finish loading.

But I'm not convinced.