I've been doing a little JavaScript (well, more like jQuery) for a while now and one thing I've always been confused about is where I should put my scripts, in the <head> tag or in the <body> tag.
If anyone could clarify this issue, that'd be great. An example of what should go where would be perfect.
I've been doing a little JavaScript (well, more like jQuery) for a while now and one thing I've always been confused about is where I should put my scripts, in the <head> tag or in the <body> tag.
If anyone could clarify this issue, that'd be great. An example of what should go where would be perfect.
Share Improve this question edited Apr 18, 2010 at 1:41 eyelidlessness 63.5k12 gold badges92 silver badges95 bronze badges asked Apr 18, 2010 at 1:36 NessDanNessDan 1,1671 gold badge17 silver badges34 bronze badges 3- 2 Can you clarify in the tag or in the tag ? – Romain Hippeau Commented Apr 18, 2010 at 1:36
-
By "in the tag", I meant in-between the
<body>and</body>tags. The same goes for<head>. – NessDan Commented Apr 18, 2010 at 2:02 - possible duplicate of stackoverflow./questions/1013112/… – Christian C. Salvadó Commented Apr 18, 2010 at 2:36
2 Answers
Reset to default 11Best practices from google and yahoo say that, for performance, javascript should always be put in an external file, and linked to your page with a <script> tag located at the bottom of the html, just before the closing of the <body> element.
This allows the browser to render the entire page right away, instead of stopping to evaluate javascript.
You mentioned three places:
In tags;
In the HTML; and
In an external file.
Let me address each of those.
Best practice is to have mon Javascript in one or more external files and the less files the better since each JS file loaded will block loading of the page until that JS file is loaded.
The word "mon" is extremely important. What that means is you don't want to put page-specific Javascript code in that external file for caching reasons. Let's say you have a site with 1000 pages. Each page has JS code specific to it. That could either be 1000 different files or one really big file that executes a lot of unnecessary code (eg looking for IDs that aren't on that particular page but are on one of the 999 others). Neither of these outes is good.
The first gives you little caching boost. The second can have horrific page load times.
So what you do is put all mon functions in one JS file where that JS file only contains functions. In each HTML page you call the JS functions needed for that page.
Ideally your JS files are cached effectively too. Best practice is to use a far futures HTTP Expires header and a version number so the JS file is only loaded once by each browser no matter how many pages they visit. When you change the file you change the version number and it forces a reload. Using mtime (last modified time of the JS file) is a mon scheme, giving URLs like:
<script type="text/javascript" src="/js/script.js?1233454455"></script>
where that mtime is automatically generated. Your Web server is configured to serve JS files with an appropriate Expires header.
So that mixes external files and in-page scripts in (imho) the best way possible.
The last place you mentioned was in the tag. Here it depends somewhat on what JS libraries and frameworks you use. I'm a huge fan of jQuery, which encourages unobtrusive Javascript. That means you (hopefully) don't put any Javascript in your markup at all. So instead of:
<a href="#" onclick="doStuff(); return false;">do stuff</a>
you do:
<a href="#" id="dostuff">do stuff</a>
with Javascript:
$(function() {
$("#dostuff").click(doStuff);
});