Whats better in terms of performance?

Question

What is better.

You have have say 20 javascript files. 10 are shared among all pages. So they would be in the master page. Now how about these other 10? Say one pages uses 4/10 another uses 4/10 and another uses 2/10.

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

or

b) have 10 combined in the master page, then all of the other pages would have there combined.

So in some my pages I would be looking at 4 or 5 java-script requests

1. one from master
2. one for jquery from google CDN
3. one for jquery ui from google CDN
4. one for jquery validate from MS CDN
5. one for anything for that page.

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

If not every time you would go to another tab it would download a new set of the javascript so it would start doing binding events such as click X time where X is how many times the user loaded up the same tab.

Answer 1

Depending on the language / server you are using there are lots of tools that dynamically combine the javascript files required on a page into a single request just for that page. Based on your reference to the Microsoft CDN, it sounds like you're using ASP.NET. Here's a combiner that might work for you that will combine the requests for your local JS files into a single request. If it was me, what I would do is load:

1. JQuery & JQuery UI from Google
2. JQuery Validate from MS CDN
3. Your local JS files combined (using a tool such as above) into one download.

That way you get 3 parallel downloads.

Answer 2

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

But if in doubt, combine.

Edit: I just read your question again. Option B is better, as to cache the master combined version.