CODEWITHSUNDEEP
javascriptjqueryajax
Nick Olsen
Nick Olsen

Reputation: 6379

AJAX Application Single or Multiple JavaScript Files

This is a best practice type of question. I am developing a complete AJAX application. The user navigates to the main page of the application and everything from there on out is loaded via AJAX into the content section of the main page. Is it better to take all the javascript files I have and merge them into one file that is loaded on the main page or to split them up into just what is needed for each page that is loaded?

Putting it all in one file obviously has the benefit that only one HTTP request is made to load the javascript needed for the site and any request for a page there after will only need to fetch the HTML. But, this requires that every event that is wired up (using jQuery) be attached to the document using the live or on function. So everything will look like:

$(document).on('click', '#SomeButton', function () { });

Doing it this way will cause there to be many hundreds and possibly over a thousand events being tied to a single element, the document.

Putting them in separate files requires multiple HTTP requests to be made to load the various pages of the site but limits the number of events that are attached to the document.

Any thoughts on what is best here?

Upvotes: 0

Views: 717

Answers (2)

Didier Ghys
Didier Ghys

Reputation: 30666

Honnestly i'm not really an expert in this domain but this is my piece of advice on this subject on a production environment.

  1. I would use CDNs for libraries (like jquery). They offer maximum cacheability, and there is a very big chance it is already cached in your client's browsers from visiting other websites. This saves some requests already.

  2. Group and minify your common javascript code, like plugins, utilities, things used throughout your site. It will be requested once for all and will then be available.

  3. Have a separate, minified, script file for each "page" you load dynamically that you will load along with your content.

Loading script for content pages:

Using the .load() method from jquery to load fragments of pages will unfortunately remove any <script> tag present in the fragment. As noted in the jquery load() method, this is to avoid "Permission denied" in IE.

What you can do is to have a <script id="contentScript"></script> tag in your base page and load the script along with the content by replacing the src.

I don't know if it is a good practice but it makes sense to me :-)

Upvotes: 1

Shamaila Tahir
Shamaila Tahir

Reputation: 998

I would vote for separate js files for each page for bigger projects specially if your project is using any js library like jQuery and its plugins like grid plugin etc. In case you have a big single javascript file your first page will load slowly obviously giving your user a bad first impression. What we do is that we create separate js files for each page specially when there are ajax calls to load data for the pages. Plus there are separate files for each pluggable component like custome drop down or date counter etc. This way its easy to manage the code and customize it later.

Before deploying the app we can merge related files and create single file for a single page. For example if a page called editProfile.php uses a data picker, a jquery validation plugin and custom js to load user data, we can combine them in a single file so that only file will be loaded for a single page.

So I would vote for separate files for each page and applying optimizations before deploying.

Upvotes: 1

Related Questions