Which is better in terms of performance?

Question

What's better.

You have 20 javascript files. 10 are shared between all pages. Thus, they will be on the main page. Now what about these other 10? Say one page uses 4/10, another uses 4/10, and the other uses 2/10.

Would it be a) better to combine them all into one file (dynamically, of course), so only one http request will be made.

or

b) have 10 combined on the main page, then all other pages will be combined.

So, on some of my pages I would look at 4 or 5 java-script requests

• one of the master
• one for jquery from google cdn
• one for jquery ui from google cdn
• one for checking jquery from MS CDN
• for anything for this page.

Most of my scripts already use jquery live, because I use jquery ajax tabs, and I have to download all the scripts for each tab at the same time.

If not every time you switch to another tab, it loads a new javascript set so that it starts to execute binding events, such as clicking X, where X is how many times the user has loaded the same tab.

Answer 1

Depending on the language / server you are using, there are many tools that dynamically combine the javascript files needed on a page into a single request for that page only. Based on your link to Microsoft CDN, it looks like you are using ASP.NET. There will be a combiner that can work for you , which will combine the requests for your local JS files into one request. If it were me, then what would I do - load:

• Google jQuery and jQuery user interface
• Validating jQuery with MS CDN
• Your local JS files are combined (using such a tool as above) into one download.

This way you get 3 parallel downloads.

Answer 2

Depends on how big your non-shared files are. If they are not too big, combine them. Requests usually take longer than the transfer. Of course, if you really care a lot, you should do your own tests.

But if in doubt, unite.

Edit: I just read your question again. Option B is better as it caches a common combo version.