Should all javascript go to a separate js file

Question

What are the criteria if a specific jquery or plain javascript should be included in either a separate js file?

Answer 1

It depends on many factors.

1. Caching

When you separate your javascript or css into separate files, 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 built-in encoding, every time a page is requested, content will be downloaded that will increase bandwidth usage.

Read more in Make JavaScript and CSS External

2. Reduce the HTTP request

By creating inline encoding, you can reduce the number of HTTP requests, which are one way to optimize the page.

For more information, see Collapse HTTP Requests.

3. Maintainability

When creating an external javascript and css file, it will be easier to maintain the code. You do not change each page to make changes.

4. Minification

Minimization is the practice of removing unnecessary characters from code in order to reduce its size, thereby increasing load time. When the code is minimized, all comments are deleted, as well as unnecessary space characters (space, new line and tab). In the case of JavaScript, this improves response performance because the size of the downloaded file is reduced.

Read more in Minimize JavaScript

Here I found a good article on

Javascript Loaded

Answer 2

It is cleaner if all this is in an external file. Keep your CSS and Javascript in your remote files for cleanliness and better service. The only exception that I make for myself in this rule is when I need to output some dynamic javascript values ​​when the page loads: I can do this in the header of the html document.

Answer 3

We use a combination at work — external files for any static JS, and are embedded in the JS page we create for each page (DotNetNuke, so we cannot predict which controls will be called clientide).

Answer 4

Personally, I prefer to keep all javascript in an external file, it keeps your HTML or XHTML clean and easier to maintain, but when I do development, I will often maintain the current piece of code I'm working on, built into the top of the file for easier access it, and then when I'm done move it to an external file.

As for the built-in javascript, I will try to avoid it as much as possible, because it makes it difficult to track errors, but odd time is useful, for example, to make a div layer into a link.

Answer 5

Personally, I consider this a personal choice and depends on the situation. If it's just a couple of Javascript lines, I don't want 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 an external file.

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

Answer 6

Saving javascript inline allows many users to autofill variables. If JS is in a separate file, this function is not available.

This is quite a lot, IMHO. And I am very surprised that the IDE is currently unable to crawl and index the use of the javascript file and thus provide reasonable autocomplete options.