47

If it is perfectly acceptable to put JavaScript right before </body> what is a good reason to keep it in the <head>?

Based on the question JavaScript in <head> or just before </body>? many answers state that the page will load faster if you put it right before the </body> tag.

However I don't see any sound arguments on why it should be kept in the <head>. I'm asking because I am not a very strong JavaScript developer and from everything I've read and seen, the standard is to keep most JavaScript code and external references in the the <head>.

Community
  • 1
  • 1
Danny
  • 7,368
  • 8
  • 46
  • 70

8 Answers8

37

Anything in the head must be completed before the body is loaded, so it is generally a bad idea to put javascript in there. If you need something while the body is loading, or want to expedite some ajax, then it would be appropriate to put it in the head.

regality
  • 6,496
  • 6
  • 29
  • 26
7

The reason behind this is as the Head gets loaded before the body. Any dynamic javascript code that gets executed in the body on load will execute correctly.

If you have javascript that is just before the </body> tag then any javascript calls made to functions by your page as it loads will error.

So yes putting javascript before the </body> tag will load faster. But only if your javascript will be executed after page load via clicks for example.

Chris
  • 3,114
  • 1
  • 18
  • 27
  • It's anything but "best practice" to put JS in the `` tag. There's a handful of usage scenarios where it might be appropriate, but by and large the "best practice" is before ``. – Chris Pratt Nov 23 '11 at 21:47
  • 1
    @Chris Edited that part out of my answer. All i meant was that there are different scenarios of usage of when to put in `` and when to put in `` And what I meant to say at the end was not to discount putting it in the head rather than "best practice" which was a slip on my part. – Chris Nov 23 '11 at 21:51
5

If you need the javascript to accomplish something on the page, and you don't want the end user to see the content until that's accomplished, then you should include it in the head. It really depends on each individual case.

Most of the time, putting it at the bottom really IS better for optimizing page download, as the user will get to see all the content on the page before the JS even starts downloading.

BumbleShrimp
  • 2,150
  • 23
  • 42
4

The only reason to put JS in the head is for scripts that modify how the browser actually renders the page. For example, Modernizr.js is loaded in the head so that it can do things like add support for HTML5 elements and manipulate classes on the <html> tag before the page begins to render.

Otherwise, your JS should be going in at the bottom of the page.

Chris Pratt
  • 232,153
  • 36
  • 385
  • 444
3

In the past, the only reason to put JS in the head was for scripts that modify how the browser actually renders the page (as Chris Pratt pointed out). Today, that's no longer the case, though :

  • If you still care a lot about support and performance in IE<10, it remains the best approach to make your script tags the last tags of your HTML body. That way, you're certain that the rest of the DOM has been loaded and you won't block and rendering.

  • If you don't care too much anymore about IE<10, you might want to put your scripts in the head of your document and use defer to ensure they only run after your DOM has been loaded (<script type="text/javascript" src="path/to/script1.js" defer></script>). The beauty of this approach, is that defer doesn't block loading the rest of the DOM. If you still want your code to work in IE<10, don't forget to wrap your code in a window.onload even, though!

Community
  • 1
  • 1
0

The head Tag loads before the Body, so Javascript that is required to load the website properly should be put there, but if it isn't required most people feel it's better to put it at the end of your body tag.

Timothy Trousdale
  • 55
-1

Traditionally pages didn't used to validate (be it XHTML Strict validation, or WAI-AAA compliance, I can't remember exactly what failed, but something failed when scripts were in the body). This would usually go alongside the recommendation of putting all scripts into external files, and linking to them with a script src="" tag.

Logic: Perhaps it was recommended by the W3C as a way of preserving the body for the most semantic markup. I think also, historically, this logic was important in days when internet was generally a lot slower - some browsers were configured to reject scripts and styles and images based on internet connectivity diagnostics & settings, and having a script in the head is a way of telling browsers "it's OK to reject this script if connectivity issues warrant it" where as scripts in the body are semantically considered to be more integral to the content. This is such a nuance though, and based on probably out-dated W3C recommendations, so I'd be hard-pressed to find a browser that actually operates in this way these days.

Nowadays it's only to affect how the page behaves while rendering.

Caution: This shouldn't apply to scripts that don't affect above-the-fold content - better to defer their loading by putting them just before the closing body tag so that users can see the above-the-fold content quicker (without having to wait for render-blocking scripts to load). This is a key pagespeed recommendation from Google and Yahoo

Daniel Land
  • 1
  • 1
-5

Thats a Question like "windows" or "mac" I think, If you put all your JS Source in the Head Section of the Website your are quit strong to the W3C. The Other Case is everthing in the Head must be loaded befor the body Element. And befor the DOM is correctly loaded. JavaScript Frameworks like jQuery have Functions like $(document).ready() to check the complete DOM is loaded. So you could do all your JS in the Head Tag. My Preference is to load all JS at the End of the Body but this decision goes to each Developer at its own :)

Jan Wiemers
  • 341
  • 1
  • 6
  • 3
    This... doesn't make any sense at all. Particularly the lines "your are quit strong to the W3C". The specifications do not state that you need to place all your scripts in the ``, and this question is not a question about opinion - there are very good technical reasons for doing or not doing this, not just a matter of personal taste and preference – Yi Jiang Nov 24 '11 at 19:17