ansaurus

Question

What are the pros and cons of including Javascript right before the </head> tag vs the </body> tag?

Answer 1

+4 A:

The advice about <head> is to not LINK TO EXTERNAL scripts that need to be downloaded. This blocks parallel downloads. Google's newest tracking code uses lazy loading, and doesn't block parallel downloads.

(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

Mike Sherov 2010-07-29 23:37:29

Answer 2

+1 A:

Putting scripts in the <head> will force the browser to download files before it renders the page and blocks parallel downloads. If you place your scripts right before the end </body> tag, the browser will parse those after your content, which should result in a faster page load.

By using the self executing anonymous function with async=true, you don't block the parallel downloading.

For really complex applications with modals, a con of putting a script right before the </body> would be if you needed to hide a modal if JS is enabled.

<head>
<script>document.documentElement.className+='js';</script>
<style>html.js #modal { display:none; }</style>
</head>

If the above snippet was placed before </body> it won't be parsed as soon as if it was in the head. There would be certain cases and inconsistencies in terms of dom ready timing that you might notice as well.

Related question: http://stackoverflow.com/questions/1013112/where-should-i-declare-javascript-files-used-in-my-page-in-head-head-or-near

meder 2010-07-29 23:42:58

Answer 3

+2 A:

My guess, in addition to what the other people have said so far, is so that the analytics can more accurately track visits. Sometimes someone will go to a site and leave before the whole page has downloaded. If they do this, there's a greater chance that they've downloaded the tracking code if it's nearer the top of the page. This should help those analyzing the statistics to see bounce rates. If you notice your bounce rate is high (and time on page is low), it could be an indicator that your page is taking too long for most audiences and should alert you to do something to speed up your page load.

Jason 2010-07-29 23:46:46

ansaurus

tags:

views:

answers:

What are the pros and cons of including Javascript right before the </head> tag vs the </body> tag?

related questions