views:

2494

answers:

11

Say I have a fairly hefty javascript file*, packed down to roughly 100kb or so, where's the best place to put this in the HTML?

<html>
<head>
    <!-- here? -->
    <link rel="stylesheet" href="stylez.css" type="text/css" />
    <!-- here? -->
</head>
<body>
    <!-- here? -->
    <p>All the page content ...</p>
    <!-- or here? -->
</body>
</html>

Will there be any functional difference between each of the options?

*that is, it's an external file that would be linked in via <script src="...">, not pasted into the HTML itself.

+9  A: 

The best place for it is just before you need it an no sooner.

Also, depending on your users physical location, using a service like Amazon's S3 service may help users download it from a server physically closer to them than your server.

Is your js script a commonly used lib like jQuery or prototype? if so, there are a number of companies, like google and yahoo, that have tools to provide these files for you on a distributed network.

levi rosol
+9  A: 

It sort of depends on the behavior of the JavaScript. From here:

Where to Put the JavaScript

JavaScripts in a page will be executed immediately while the page loads into the browser. This is not always what we want. Sometimes we want to execute a script when a page loads, other times when a user triggers an event.

Scripts in the head section: Scripts to be executed when they are called, or when an event is triggered, go in the head section. When you place a script in the head section, you will ensure that the script is loaded before anyone uses it.

<html>
<head>
<script type="text/javascript">
....
</script>
</head>

Scripts in the body section: Scripts to be executed when the page loads go in the body section. When you place a script in the body section it generates the content of the page.

<html>
<head>
</head>
<body>
<script type="text/javascript">
....
</script>
</body>

Scripts in both the body and the head section: You can place an unlimited number of scripts in your document, so you can have scripts in both the body and the head section.

<html>
<head>
<script type="text/javascript">
....
</script>
</head>
<body>
<script type="text/javascript">
....
</script>
</body>

Using an External JavaScript

Sometimes you might want to run the same JavaScript on several pages, without having to write the same script on every page.

To simplify this, you can write a JavaScript in an external file. Save the external JavaScript file with a .js file extension.

Note: The external script cannot contain the tag!

To use the external script, point to the .js file in the "src" attribute of the tag:

<html>
<head>
<script src="xxx.js"></script>
</head>
<body>
</body>
</html>

Note: Remember to place the script exactly where you normally would write the script!

Matt J
+22  A: 

The Yahoo! Exceptional Performance team recommend placing scripts at the bottom of your page because of the way browsers download components.

Of course Levi's comment "just before you need it and no sooner" is really the correct answer, i.e. "it depends".

wrumsby
For example, if you're going to be doing a bunch of jQuery stuff, you would need the library loaded before you actually try to make use of it.
BryanH
Also, the reason why Yahoo EPT recommends placing JS at the bottom is because the browser must go into single-threaded mode while the JS loads and then executes. If the script is in the head or in the midst of the content, the browser will "pause" while it deals with the JS. By placing the JS at the bottom, the content will be loaded and generally visible so the user can start reading it while the browser is still dealing with the JS.
BryanH
+1  A: 

I tend to avoid putting Javascript within the HTML pages themselves unless it's absolutely certain it can never be used by another page. Almost all of my Javascript is therefore stored in JS files which are referenced in the HTML thus:

<script src="my_javascript.js"></script>

It also makes the separation of code/markup cleaner for me.

paxdiablo
A: 

I agree with Pax Diablo. Unless it's an one-liner, always put javascript content in his own separate file.

Bye!

Hermooz
yeah, but where would you include that file?
nickf
+4  A: 

With 100k of Javascript, you should never put it inside the file. Use an external script Javascript file. There's no chance in hell you'll only ever use this amount of code in only one HTML page. Likely you're asking where you should load the Javascript file, for this you've received satisfactory answers already.

But I'd like to point out that commonly, modern browsers accept gzipped Javascript files! Just gzip the x.js file to x.js.gz, and point to that in the src attribute. It doesn't work on the local filesystem, you need a webserver for it to work. But the savings in transferred bytes can be enormous.

I've successfully tested it in Firefox 3, MSIE 7, Opera 9, and Google Chrome. It apparently doesn't work this way in Safari 3.

For more info, see this blog post, and another very ancient page that nevertheless is useful because it points out that the webserver can detect whether a browser can accept gzipped Javascript, or not. If your server side can dynamically choose to send the gzipped or the plain text, you can make the page usable in all web browsers.

bart
A: 

The answer is depends how you are using the objects of javascript. As already pointed loading the javascript files at footer rather than header certainly improves the performance but care should be taken that the objects which are used are initialized later than they are loaded at footer. One more way is load the 'js' files placed in folder which will be available to all the files.

GustlyWind
A: 

Like others have said, it should most likely go in an external file. I prefer to include such files at the end of the <head />. This method is more human friendly than machine friendly, but that way I always know where the JS is. It is just not as readable to include script files anywhere else (imho).

I you really need to squeeze out every last ms then you probably should do what Yahoo says.

Berserk
+1  A: 

Using cuzillion you can test the affect on page load of different placement of script tags using different methods: inline, external, "HTML tags", "document.write", "JS DOM element", "iframe", and "XHR eval". See the help for an explanation of the differences. It can also test stylesheets, images and iframes.

Sam Hasler
+1  A: 

Putting the javascript at the top would seem neater, but functionally, its better to go after the HTML. That way, your javascript won't run and try to reference HTML elements before they are loaded. This sort of problem often only becomes apparent when you load the page over an actual internet connection, especially a slow one.

You could also try to dynamically load the javascript by adding a header element from other javascript code, although that only makes sense if you aren't using all of the code all the time.

Matthias Wandel
A: 

thanks for that, you just save me loads of time!