Question

While declaring Javascript in a html document. We have 3 ways to do that

1. script section goes in the head tag
2. script section goes in the body tag
3. javascript is references from an external file

Which one of these is faster and efficient with respect to performance is considered?

Thanks

Answer 1

1 and 2 are about tag location. 3 could apply to both 1 and 2.

In addition, you can have javascript in event handler attributes, like so:

<button onclick="alert(1)">pressme</button>

to top it off, you can also have javascript as url, in for example links:

<a href="javascript: alert(1)">click me</a>

Just sticking to your examples: first of all, it is usually a good idea to use external script files that you load with a src component in tags. This allows the browser to cache the script, which allows the page to load faster after the initial page load. this is especially true if you use things like jQuery and load them from a public Conent delivery network (like the google ajax api see: http://code.google.com/apis/ajaxlibs/documentation/)

As for the location (head or body): in the olden days, people used to say, put your scripts in the head to ensure they are loaded once the body is loaded and all the interactive elements can be used by the user. But the problem with that is that the loading of those scripts will block loading of the visual part of the page, the body. Basically, the users are looking at a blank page, wondering whuy their page is taking so long to render.
So nowadays, the popular wisdom is to put all scripts as far down in the body as you can, and make sure that you write your javascript in a way that it can handle partially loaded scripts. The YSlow guide is a great resource to learn about these things. see:
http://developer.yahoo.com/yslow/help/