Where is the best place to put <script> tags in HTML markup?

views:

2342

answers:

+13 Q:

Where is the best place to put <script> tags in HTML markup?

When embedding JavaScript in an HTML document, where is the best place to put the <script> tags and included JavaScript? I seem to recall that you are not supposed to place these in the <head> section, but placing at the beginning of the <body> section is bad, too, since the JavaScript will have to be parsed before the page is rendered completely (or something like that). This seems to leave the end of the <body> section as a logical place for <script> tags.

So, where is the best place to put the <script> tags?

(This question references this question, in which it was suggested that JavaScript function calls should be moved from <a> tags to <script> tags. I'm specifically using JQuery, but more general answers are also appropriate.)

+1 A:

If you are using JQuery then put the javascript wherever you find it best and use $(document).ready() to ensure that things are loaded properly before executing any functions.

On a side note I like all my script tags in the <header> as that seems to be the cleanest place.

Andrew Hare 2009-01-12 18:18:14

+17 A:

Just before the closing body tag

http://developer.yahoo.com/performance/rules.html#js_bottom

Cammel 2009-01-12 18:18:25

+2 A:

The conventional (and widely accepted) answer is "at the bottom", because then the entire DOM will have been loaded before anything can start executing.

There are dissenters, for various reasons, starting with the available practice to intentionally begin execution with a page onload event.

le dorfier 2009-01-12 18:18:48

+1 A:

I think this YSlow site is pertinent.

duffymo 2009-01-12 18:22:02

+2 A:

~~XHTML Won't Validate if the script is anywhere other than within the head element.~~ turns out it can be everywhere.

You can defer the execution with something like jQuery so it doesn't matter where it's placed (except for a small performance hit during parsing).

Allain Lalonde 2009-01-12 18:22:53

XHTML will validate with script tags in the body, both strict and transitional. Style tags however may only be in the head.

I.devries 2009-01-12 18:43:32

Depending on the script and its usage the best possible (in terms of page load and rendering time) may be to not use a conventional <script>-tag per se, but to dynamically trigger the loading of the script asynchronously.

There are some different techniques, but the most straight forward is to use document.createElement("script") when the window.onload event is triggered. Then the script is loaded first when the page itself has rendered, thus not impacting the time the user has to wait for the page to appear.

This naturally requires that the script itself is not needed for the rendering of the page.

For more information, see the post Coupling async scripts by Steve Souders (creator of YSlow but now at Google).

stefpet 2009-01-12 21:06:03

+2 A:

The standard advice, promoted by the Yahoo! Exceptional Performance team, is to put the <script> tags at the end of the document body so they don't block rendering of the page.

But there are some newer approaches that offer better performance, I'm duplicating another answer here:

There are some great slides by Steve Souders (client-side performance expert) about:

Different techniques to load external JavaScript files in parallel
their effect on loading time and page rendering
what kind of "in progress" indicators the browser displays (e.g. 'loading' in the status bar, hourglass mouse cursor).

orip 2009-01-12 23:37:11

I have been always putting my tags in the header, after reading this the logic is correct, it would make more sense to put just before close of body so that the page can load before execution.

Thanks guys !

Bouncy Castle Hire In Weston 2010-05-07 13:56:00

ansaurus

tags:

views:

answers:

Where is the best place to put <script> tags in HTML markup?

related questions