How to judge which javascript can be placed at bottom or which must be in <head>?

views:

174

answers:

+1 Q:

How to judge which javascript can be placed at bottom or which must be in <head>?

We can place JavaScript in 3 ways?

as a external file
in <head>
in body <body>

all methods are valid by W3C ?

So How to judge where JavaScript should be placed at bottom or which must be in <head> or in <body>?

I've seen JavaScript on many sites
in <head> ,
as a external js,
just before </body> and
some time anywhere in <body>....<body> for example: before any other XHTML tag/code which are going to affect with that JavaScript code.

update: I saw mostly people use Google analytics code as a inline javascript at bottom?

+1 A:

In most all cases, Javascript should be as an external file, to allow caching and avoid re-downlading the exact same 100+-line script on each page load. (If, on the other hand, it is a script you only expect users to ever see once, then inline is fine.)

Whether or not it goes in head or body is really your choice, though Yahoo recommends the bottom of the body for performance.

Matchu 2010-01-08 03:45:14

problem with putting it at the bottom is when you need the javascript to be loaded before the page is completed loading. Example is javascript-based menu. You NEED the menu to work before the page is completely loaded.

Martin 2010-01-08 04:01:09

@Martin write your menu in such a way that it works without JavaScript. There is such a thing as usability testing and compliance.

Tracker1 2010-01-08 10:19:49

+3 A:

Related SO posts:

Where should I declare JavaScript files used in my page? In or near </body>?
Does javascript have to be in the head tags?

o.k.w 2010-01-08 03:46:09

+5 A:

In my coding I follow the following rules with regards to JS organisation:

Any JS that is not time sensitive and/or runs after the document is loaded gets put into an external js file and included in the head
Any JS that needs to run as soon as possible is placed in the DOM where appropriate (eg. if you want some code to run as soon as the necessary elements are loaded place the code directly below the last dependent element)
Any external tracking libraries like Nielsen/Google go right at the bottom just before the closing body tag

Darko Z 2010-01-08 03:47:15

If you're concerned with page load times this google article on minimizing your payload size might help. I've linked to the section relating to deferring the loading of javascript. Not exactly what you asked for but might come in handy.

In fact, http://code.google.com/speed/ is just plain handy!

jeerose 2010-01-08 04:44:36

I generally will place as much as I can into external js files. The main exception to this, is information injected into the page server-side at load. I tend to push everything that is not specific to the one page into a library/site js file. If you don't have a need for inline scripts (ie: document.write), then it's best to push your scripts to the bottom before the closing body tag (see YSlow and yahoo's research on why).

If the page/script doesn't NEED document.write, put it at the bottom.
If it does NEED document.write evaluate why.
If it can easily be externalized (into a separate .js) do it.
If it isn't specific to the one page, put it into a .js that is used by multiple pages.
Merge custom site scripts into a single .js where possible.
minify/reduce said .js and use http compression wherever possible.

The primary reasons for this:

Separate your markup from your scripts.
Separate your markup from your scripts.
Separate your markup from your scripts (as much as possible, same as for css)
Create reusable script includes to reduce server requests.
Reduce server requests
Reduce the time to transfer your files.

Tracker1 2010-01-08 10:17:34

ansaurus

tags:

views:

answers:

How to judge which javascript can be placed at bottom or which must be in <head>?

related questions