javascript - Is it necessary to put scripts at the bottom of a page when using the "defer" attribute?

Question

I always put my script tags at the bottom of the page since it's good practice to load scripts after things like HTML/CSS and text has finished loading. I just found out about the defer attribute which basically does the same thing, that is it waits till the page has finished loading before fetching and executing scripts.

So if using the defer attribute is it necessary to physically place script tags at the bottom of the page vs inside the head tag?

I find it better for readability to keep script tags inside the head section.

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

or

<script defer="defer">

// do something

</script>

Answer 1

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.