Which is better: public javascript CDN or self-hosted combined javascript? [closed]

Question

My web page uses several javascript libraries, like jquery, jquery-ui, underscore, backbone, and a few other well-known jquery plugins.

Now I face a dilemma, I could:

1. use a public CDN that hosts all of these libraries. And if the user has visited another site using the same CDN, the scripts may have been cached. But since each library is separate, the page need to include many script tags, hence many http requests.

2. Combine all the required scripts into one (including my own script files) and host it on my own server. Only one request for everything, but I couldn't serve the script faster than CDN, and I cannot take advantage of the cache.

From your own experience, which is better?

And I want to estimate whether enough websites use the mentioned CDN (if many well-known sites use them, then the probability of scripts being cached is high), how can I investigate? I tried googling the script src attribute, but it seems google doesn't index that.

Answer 1

If using only 1-2 libraries, a good practice is too include the CDN version, with a fallback to local version. This is the practice that most HTML boilerplates/frameworks use .e.g .

http://html5boilerplate.com/

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="//myserver/js/libs/jquery-1.8.3.min.js"><\/script>')</script>

However,you are using a lot of libraries, so there might be dependencies, and specific ordering of them on the page, and some of them might not be present on standard CDNs,so you will have to anyway include some of your javascripts from your server. Hence for your case, a better bet would be to use good combining/versioning of all your javascript code into 1-2 files .e.g one for libraries(usually not touched), and one for your own custom code(cache busted when you make changes to it).