Including many javascript files on the same page can lead to low performance. What I want to ask is: Is it best to keep separate files or include all files in one javascript file?

And if it is better to include everything in the same file Javascript, how can I avoid conflicts between different scripts?

Including many javascript files on the same page can lead to low performance. What I want to ask is: Is it best to keep separate files or include all files in one javascript file?

And if it is better to include everything in the same file Javascript, how can I avoid conflicts between different scripts?

• javascript
• html
• performance

• If you'll compact your scripts in a single file, the best way to avoid conflics is not to repeat function and variable names, for sure. – DontVoteMeDown Commented Jul 18, 2013 at 12:55
• 3 To combine scripts you would use a munging tool in your build process. To keep scripts from conflicting, you would use proper javascript coding patterns. – jbabey Commented Jul 18, 2013 at 12:56
• I answered a similar question here stackoverflow.com/a/12155537/542251 – Liam Commented Jul 18, 2013 at 13:01
• this is a good resource for site performance, in general: developer.yahoo.com/performance/rules.html – Liam Commented Jul 18, 2013 at 13:02
• As with all optimization, it may make sense to first quickly profile your page load to see what your biggest bottleneck is. Optimizing page load in as many ways as possible, JS included, is a good thing, but developer tools like Chrome's could help you first find that there are other, bigger issues (lack of caching, unused images loaded, unusually slow server response, etc) – Katana314 Commented Jul 18, 2013 at 13:11

4 Answers 4

It is best to keep separate files or include all files in one file Javascript?

To avoid multiple server requests, it is better to group all your JavaScript files into only one.

If you're using C#.Net + ASP.Net, you can bundle your files — it is a very good way to compress your scripts.

how can I avoid conflicts between different scripts?

You can use RequireJS; different names it is a good idea too; and every time that a plug-in/script ends, use ; to determine its end.

Performatic consideration

To maintain the productivity of your scripts, you should minify them.

Solution for a single page application

After you have minified your scripts, then group them all — regardless if they are plugins or your own code — into a single file and call it in your application.

Solution for a multiple page application

In this case, you should call just the necessary JavaScript for each page. How can you do this?

After you minified all of your scripts, then separate them in categories. Take a look to get the idea:

/assets/js/core.js — here you put your JavaScript code that is necessary to all of your pages. It is your core; your kernel;

/assets/js/plugins.js — here you put all the plugins that runs with all of your pages (i.e. jquery, backbone, knockout, and so on.);

/assets/js/home/bootstrap.js — here is the magic: in this file you have to fill with the code that your home will call;

/assets/js/contact/bootstrap.js — the same as before: this file you should to place with the code that your contact page will call.

HINT: core.js and plugins.js can occupy the same file when you deploy your application. To better comprehension and developing, it is good to maintain them into separated files.

Third party plugins

To give you an idea, the file of your plugins should be like this:

/* PlaceHolder plugin | http://www.placeholderjs.com/ | by @phowner */
; $(function(){ /* the placeholder's plugin goes here. */ });

/* Masked Inputs plugin | http://www.maskedjs.com/ | by @maskedowner */
; $(function(){ /* the masked input's plugin goes here. */ });

/* Mousewheel plugin | http://www.mousewheeljs.com/ | by @mousewheelowner */
; $(function(){ /* the mousewheel's plugin goes here. */ });

Serving one large single vs serving multiple small files depends on quite a few factors:

• do all clients require the exact same code base?
  • i.e. we probably don't need shim for modern browsers, so why serve it?
• do we change those files regularly?
  • caching files that don't change often can be used to reduce traffic
• do we want to use CDNs?
  • serving jQuery from New York to New York rather than shoving it around half the planet probably ammortizes an additional HTTP request (performance-wise at least)

Conflicts can be reduced/eliminated by introducing your own scope for each script. A common way is to use IIFEs/SIAFs and inject required variables.

A quick and simple example of an IIFE:

(function () { // IIFE
    var undefined = true;
})();

if (document.querySelectorAll === undefined) {
    // polyfill
}

If the content in the IIFE would execute in global scope, it would probably crash your polyfill. Since it is executed in a local (function) scope, you are pretty much safe from conflicts.

Note: usually, your polyfill should not be implemented in global scope as well.

Conflicting code has nothing to do with combining JavaScript or put it in separate files but it requires descent programming.

To combine or not to combine depends on multiple things like:

• file size
• how many changes are you expecting.
• How many relevant code has to be loaded at once that it is useful to put it in one file or separate files
• one file keeps the number of file requests low
• ..

It's generally better to bundle. If you are using Visual Studio you can use the Web Essentials bundling for JS, CSS, and even image sprites.

http://vswebessentials.com/features/bundling