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

Question

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>

Yes, there shouldn't be any difference that I can think of... except maybe if there's another script earlier in the document that also has `defer` — CertainPerformance, Jun 07 '22 at 01:40
If there is an earlier script tag with defer, like ` `, then it makes a difference to the last script tag. — qrsngky, Jul 02 '22 at 16:02

score 2 · Answer 1 · edited Jun 25 '22 at 20:32

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.

mjwils · Answer 2 · 2022-07-03T04:07:55.680

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.

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

3 Answers3