Is it necessary to put scripts at the bottom of a page when using the “defer” attribute?

28
votes

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>
5
javascripthtml
Your second example won't actually be deferred. defer only works on external scripts. – millimoose
Wouldn't putting the script at the end and setting it to defer be redundant? As for whether or not to use defer at all, do you want to ignore Opera's market share? (Apparently Opera doesn't support the html5 async attribute either.) You might want to consider something like yepnope.js. – nnnnnn
The corrolary is that if you need to use some literal scripts then the order of execution of the deferred external scripts and the literal scripts will suddenly be nontrivial to determine when reading the HTML source. What you'd have to do is make sure ALL scripts (except Modernizr and other that should be loaded early) are loaded from external files, and declare them as deferred. This doesn't really seem like that much less bother than just making sure scripts are included at the end of a file. Sure it's cleaner, but it's understandable why someone would pick the other option. – millimoose
@millimoose In fact, it worked on internal scripts too in Gecko 1.9.1- – raina77ow
Essentially, my point is that if you keep undeferred scripts one the bottom of the page, you know when they'll be executed, you know in what order they'll be executed, and you know what the performance impact of this will be. If you use deferred scripts in <head>, you're relying on implementation details / adherence to HTML5 of the specific browser. – millimoose

5 Answers

6
votes

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.

5
votes

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.

2
votes

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.

2
votes

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".

1
votes

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).