denasio — 2011-05-11T08:42:16-04:00 — #1
ralphm — 2011-05-11T08:55:44-04:00 — #2
Actually, a lot of JS gurus these days advocate putting your scripts just before the closing body tag. That way, the page loads first (HTML and CSS) and it's handy also handy to have the DOM elements in place first where the JS has to act on them. (Otherwise, you have to tell the script not to run until the page has loaded).
Yes, true, but usually that is junk code, so don't base your understanding of JS around that stuff.
denasio — 2011-05-11T09:38:23-04:00 — #3
What? How dare you call my code junk!
felgall — 2011-05-11T16:11:59-04:00 — #4
The best place to put the script tag is immediately before the </body> tag. Not all older scripts will work when put there though (although ones designed to go in the <head> should all also work better if moved there.
By moving the script to the end you allow the rest of the page to load first without being held up waiting for the script to load first.
denasio — 2011-05-11T16:41:38-04:00 — #5
ralphm — 2011-05-11T19:11:36-04:00 — #6
The debate about where to put scripts is an interesting one. I have a good book on JS, first published in '05, which tells you to put the scripts in the head, but recently I got the new edition, which advocates putting the JS just before the closing </body> tag. The web is evolving, and people are refining their understanding of best practice as things move along.
paul_wilkins — 2011-05-11T19:35:58-04:00 — #7
Before HTML4 scripts were only allowed in the head. From HTML4 onwards, they were allowed in the body as well. After further investigations took place, the benefits of doing so were discovered. The trouble is that ancient web browsers (much older than IE6) weren't able to have scripts in the body.
It takes a while for old web browsers to die (or die out enough), so it has only been within the past 4 years or so that it has been a viable technique to use widely.
So now you have a choice when scripts need to touch the body content.
Head scripts cannot directly touch the body, because at that moment, the body does not yet exist. So, head scripts have to employ various type of trickery in order to touch the body.
- They may wait for the onload event, by which time people are sick and tired of waiting for images to finish loading before the script can begin
- They may wait for the DOM to finish loading, which require difficult to remember cross-browser code, and is also only supported in some web browsers
- Or they may use a timed interval to continue polling the page until the part they want to touch becomes available.
Another problem with head scripts is that they completely block the page loading process. Whenever a head script is encounted, nothing on the page is allowed to loaded until the head script has loaded, and fully finishes running its script.
Body scripts have some advantages over that.
- They automatically have access to everything that's above them, so there's no need to wait an onload event.
- They can be run immediately, so they get to be executed even before the DOM has finished loading.
- Polling techniques by using timed intervals aren't required, but may still have a useful place from the head.