pros and cons for these 2 kinds of loading javascript files?

Question

A:

<script type="text/javascript" src="b1.js"></script>
<script type="text/javascript" src="b2.js"></script>
<script type="text/javascript" src="b3.js"></script>
<script type="text/javascript" src="b4.js"></script>

B: put all stuff in b1~b4 into another file t.js

<script type="text/javascript" src="t.js"></script>

Suppose b1~b4 each have a size of 200 KB

Those b?.js files have already been compressed.

Answer 1

Concatenate them and them put them through a minifier (Preferably YUI Compressor) and then make sure gzipping is enabled on the server.

My experience is that it leads to about a 40% to 50% drop in file size.

Less HTTP requests is always good and youll get better gzip results if they are all together. It will lead to better client side performance in the long run.

Additionally, figure out why your JavaScript is so large!

Answer 2

HTTP request overhead and connections. It's usually worth it to combine -- we do it in our build scripts so that we can develop with them separate.

Answer 3

Deploying separate JavaScript files and having the user's browser stitch them together is like deploying separate object files and having the user's loader link them into an executable.

If there is a strong liklihood that the user's browser already has one, but not all, of your JavaScript component scripts cached, then it can make sense for you to present them individually. If you are using popular Google- or Yahoo-served JavaScript library components that your user probably has loaded during visits to other sites, then presenting those components separately will save the user time and bandwidth.

If the scripts are all unique to your website and you deploy them all on multiple pages, then it is better to combine and minify them as part of your build process, just as desktop applications combine object and library files as part of their build process.

Answer 4

If you are using Java Platform , give a try to JAWR (https://jawr.dev.java.net/). It solves mundane front end tuning problems in simple and crisp manner.

Answer 5

A good way to check out the expense of multiple JS file requests vs. single is to run your page thru http://tools.pingdom.com/fpt/?url=www.yourdomain.com/ both ways. It shows you the cost of connection times as well as response and data transmission times.