CODEWITHSUNDEEP
javascriptjqueryxhtml
Jitendra Vyas
Jitendra Vyas

Reputation: 152677

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

We can place JavaScript in 3 ways?

  1. as a external file
  2. in <head>
  3. 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>?

  1. I've seen JavaScript on many sites
  2. in <head> ,
  3. as a external js,
  4. just before </body> and
  5. 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?

Upvotes: 1

Views: 949

Answers (5)

Tracker1
Tracker1

Reputation: 19334

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).

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

The primary reasons for this:

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

Upvotes: 0

jay
jay

Reputation: 10325

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!

Upvotes: 0

Darko
Darko

Reputation: 38860

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

  1. 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
  2. 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)
  3. Any external tracking libraries like Nielsen/Google go right at the bottom just before the closing body tag

Upvotes: 6

o.k.w
o.k.w

Reputation: 25810

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?

Upvotes: 3

Matchu
Matchu

Reputation: 85792

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.

Upvotes: 1

Related Questions