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

Best practices have shifted since these answers were written, because support for the defer attribute has grown to 98% globally.

Unless you need to optimize speed for older browsers, you should put the script in the head and mark as defer. This 1) keeps all your script references in one place (more maintainable) and 2) makes the browser aware of the script sooner, which lets it start prioritizing resources earlier.

The performance difference difference should be negligible for most pages, because the browser's pre-loader probably isn't going to start downloading a deferred script until the whole document is parsed anyway. But, it shouldn't hurt, and it leaves more work for the browser, which is generally best.

Answer 2

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.

Answer 3

There are different reasons why using defer in a script at the bottom of the HTML makes sense:

• Not all browsers support "defer". If you put your script in the HEAD with defer and the browser does not support defer, the script blocks the parallel download of the following elements and also blocks progressive rendering for all content below the script.
• If you just place the script at the bottom without defer the browser will continue to show a busy indicator until the page has finished parsing the JavaScript.
• In some cases the "script at the bottom without defer" blocks progressive rendering. Tested in Google Chrome 36 and IE11 (see comment below)

It's important to know that every browser handels things like "defer" and also the busy indicators a little bit different.

Best practice should be: Put scripts at the bottom with defer.

Besides the readability aspect I only see advantages by putting scripts at the bottom with defer in comparison to "Script in Head with defer" or "Script at the bottom without defer".

Answer 4

First of all, the defer attribute is not supported by all browsers (and some that do support it just ignore it). Putting the script at the bottom of the page ensures that all HTML elements above it have been loaded into the DOM before the script executes. An alternative is using the onload method or using jQuery's DOM ready function.

Answer 5

While I agree with you that using 'defer' and placing scripts in header will improve readability, this attribute is still not supported by both desktop and mobile Opera (check this table for details).