Is adding defer to a script tag at the end of a closing body tag redundant?

user_7624223 0
Viewed 148

for example:

<body>
  ...all content is above the script...
  <script src="https://foo/bar.js" defer></script>
</body>

Does it matter if we remove the defer from the script tag? By putting the script at the end of the body tag is already delaying the execution of the script so the above code should be the same as the following snippet right?

<body>
  ...all content is above the script...
  <script src="https://foo/bar.js"></script>
</body>
html javascript
3 Answers

According to Ben

The current best practice? Use deferred scripts in order in the head, unless you need to support older browsers (IE < 10, Opera Mini, etc.) - 97.45% browser usage (ref)

Why? With defer, parsing finishes just like when we put the script at the end of the body tag, but overall the script execution finishes well before, because the script has been downloaded in parallel with the HTML parsing. This scenario will trigger the faster domInteractive event that is used for page loading speed. With async, the order in which your script will execute varies based on how fast the script is fetched, so order can be compromised. Futhermore, async scripts are executed inline and pause the parsing of the HTML.

Also from Mhmdrz_A

Browser will parse the document from top to bottom, hence putting the scripts after all the main content will make the parser to reach that

later in time; which make the browser to download the script later in time; The delay caused by putting the defer in the bottom is absolutely non-sense, since the browser won't execute them (s) before (or during) HTML parser; Thus it's better to let the browser load ( download ) them () as soon as possible, an have them available to execute as soon as the all the main tasks are done.
user_194163390

Does it matter if we remove the defer from the script tag? By putting the script at the end of the body tag is already delaying the execution of the script so the above code should be the same as the following snippet right?

Right you are! In this case, I'd say that there is no difference. As you correctly mention: the body tag is before the script, and that means it gets parsed first. Your html file has no idea there is any javascript until it has fully parsed the preceding code, and therefore defer does nothing.

Defer's only job is to run JavaScript after all the html has been parsed: see the MDN docs.

That said, with slightly different code, with say, another <script /> underneath is where the difference is found. That second (or more) <script /> tag will then begin to download in parallel (but executed in order). For example:

<script src="script1.js" />
<script src="script2.js" />

script1 is downloaded first, blocking script2 from downloading.

<script src="script1.js" defer />
<script src="script2.js" defer />

script1 is starts to download, then script2 also starts to download in parallel — but — script1 still gets executed in first, even if script2 finishes downloading first.

Further reading:

Hope this helps!

user_191111130

Practically there will be no difference between these two. Except that document.write (which shouldn't be used anyways) obviously is not allowed in defer.

Technically those are different. So the difference between a script having defer and one that does not, is that the one with defer is executed once the DOM is fully loaded, and the one without at the time where it is loaded.

This can make a difference if the client received the <script src="https://foo/bar.js" defer></script> tag, but the rest of the document is for some reason delayed due to whatever reason. The defer script can only execute if the complete response is sent.

But if that happens then you have other problems anyway.

user_19604550
Related