should all javascript go into a separate js file

Question

What is the criteria if certain jquery or regular javascript should go inline or in a separate js file?

Answer 1

It's cleaner if it's all in an external file. Keep your CSS and Javascript in their own remote files for cleanliness and better maintenance. The only exception I make for myself to this rule is when I need to output some dynamic javascript values upon page-load: I may do that within the head of the html document.

Answer 2

Personally, I think it's a personal choice, and depends on the situation. If it's a just a couple lines of Javascript, I don't bother to make a separate file (and another HTTP request). However, if it is more, with functions and more than trivial impact, I put it in a external file.

Also, if the code will be used on more than one page, it should always go in a separate file, even if it is just a couple lines.

Answer 3

Personally I prefer to keep all javascript in a external file it keeps your HTML or XHTML cleaned and easier to maintain but when I am developing I will often keep the current piece of code I am working on at embedded at the top of the file for easier access to it then when i'm done I move it to an external file.

As for inline javascript I would try to avoid it as much as possible because it makes it difficult to track down bugs but the odd time it is helpful such as making a div layer into a link.

Answer 4

We use a combination at work - External files for any static JS, and embedded in the page for JS that we build for every page (DotNetNuke, so we can't predict what controls will be named clientside).

Answer 5

Keeping javascript inline enables many ide's to perform autocomplete on variables. Whereas if JS is in separate file this feature is not available.

This is quite a big deal, imho. And I am pretty amazed that IDE's nowadays can't scan and index the usage of a javascript file, and thus provide sensible autocomplete options.

Answer 6

It depends on many factors

1. Caching

When you separate your javascript or css into separate files then it will be cached in the browser and when a new request arrives there is no need to download a new one from the browser. But in the case of an inline coding each time the page is requested the content will be downloaded which will increase the bandwidth usage.

Read more in Make JavaScript and CSS External

2. Reduce HTTP request

By making an inline coding you can reduce the number of HTTP requests which is one page optimization technique.

Read more on this in Minimize HTTP Requests

3. Maintainability

By making external javascript and css file it will be easier to maintain the code. You don't have t change each page for the changes to be applied.

4. Minification

Minification is the practice of removing unnecessary characters from code to reduce its size thereby improving load times. When code is minified all comments are removed, as well as unneeded white space characters (space, newline, and tab). In the case of JavaScript, this improves response time performance because the size of the downloaded file is reduced.

Read more in Minify JavaScript

Here I found a nice article on

Supercharged Javascript