ansaurus

Question

Optimal location for javascript includes...

Answer 1

A:

Google Analytics always used to say to put the script tag at the bottom of the page. I believe the rationale was that if the Google servers ever went down, the page would fail to load if it were in the head (only for IE probably).

stealthdragon 2010-01-05 16:17:10

Why would the page fail to load?

Andy E 2010-01-05 16:28:28

My understanding is that certain browsers wouldn't display the content of the page until the javascript had been fully downloaded and parsed. I forget exactly how it worked, but it must have worked through the page in a linear fashion looking at one tag at a time. Not too sure...

stealthdragon 2010-01-05 16:34:01

Answer 2

+3 A:

The only validating way is to include it on the top (in the <head> section), but in the bottom will be faster to load - the rest of the page will load faster if you have script near the bottom, giving the user better response and making the experience better.

The problem is that most web browser stop rendering the HTML of the page until they've fetched and parsed all JavaScript code so far. So if you have a slow-loaded .js file included in the <head>, no HTML will be rendered and images will not even start to download before the .js have been downloaded and parsed, therefore frontend engineers propagate for putting the scripts as far down in the code as possible.

I usually just set a far-future Expires header for my .js files so they are cached in the browser for a long time and then include them in the <head> section. This gives good performance and doesn't look ugly :-)

But if you are serving external .js libraries (that are on other servers than your own), you will probably want them in the bottom because you can't change the Expires-header for other servers and you canät know that the other server always will be responsive.

Emil Vikström 2010-01-05 16:17:49

Answer 3

+1 A:

yeah. Put Scripts at the Bottom

I think the size of the js file is much more important than the location of javascript. I always set highter number of the con-current connection to make sure they download in parallel.

Tommy 2010-01-05 16:19:51

Answer 4

+5 A:

It really depends.

There is no catch all answer for this because it depends on what your javascripts are acting on.

Putting scripts at the end of the page is sometimes needed if your acting on a DOM element that needs to be loaded for the script to run. Say you want to focus on a control and your script is:

var mytext = document.getElementById("mytext2"); 
mytext.focus();

Well in this case you would want it to execute at the end of the page, after mytext2 control has already been loaded by the browser. This is less important for script blocks that only contain functions that are called by events.

If you have a big .js file that contains libraries of functions you may also want to put that at the end of the page so the browser will load the page faster before loading the large .js file.

Google analytics suggests putting their tracker at the end, to make sure the page has been delivered before you count the hits, but in some cases it suggests putting the script into the header too, it works both ways.

So, rule of thumb for me is, HEAD scripts for everything except things that execute in-line and act on DOM objects, or large scripts that you want to load after the page.

Rick Strahl just wrote a great blog on placement of Javascript in .net too:

Tj Kellie 2010-01-05 16:29:08

If you are using jQuery, you can have scripts in HEAD that work on the DOM, because you can use $(document).ready() to run a callback function when it's done. It's really neat! But your point is still valid, everbody doesn't use jQuery (and sometimes they shouldn't! It's good to do some things yourself)

Emil Vikström 2010-01-05 17:00:59

Answer 5

+1 A:

I believe it's better to place script tags just before the closing body tag. Because:

Elements are blocked from rendering if they are below the script.
In IE6, IE7 resources in the page are blocked from downloading if they are below the script.

From this article. Also Yahoo's performance rule 6 is Move Scripts to the Bottom

valums 2010-01-05 17:10:30

ansaurus

tags:

views:

answers:

Optimal location for javascript includes...

In the `<head>` of the page or Just inside the `<body>` tag

Last thing in the `body` element

But which is better?

related questions

ansaurus

tags:

views:

answers:

Optimal location for javascript includes...

In the <head> of the page or Just inside the <body> tag

Last thing in the body element

But which is better?

related questions

In the `<head>` of the page or Just inside the `<body>` tag

Last thing in the `body` element