How to cache my javascript files to improve performance

Question

So here is my header:

<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script> 
<script type="text/javascript" src="js/jquery-ui-1.8.14.custom.min.js"></script> 
<script type="text/javascript" src="js/jdpicker/jquery.jdpicker.js"></script> 
<script type="text/javascript" src="js/uniform/jquery.uniform.min.js"></script> 
<script type="text/javascript" src="js/jquery.hotkeys.js"></script> 
<script type="text/javascript" src="js/visualize/visualize.jQuery.js"></script> 
<script type="text/javascript" src="js/jquery.cookie.js"></script> 
<script type="text/javascript" src="js/fancybox/jquery.fancybox-1.3.4.pack.js"></script> 
<script type="text/javascript" src="js/jwysiwyg/jquery.wysiwyg.js"></script> 

All of these have to be loaded and its lagging my site how can i get them cached so the load time is faster

Answer 1

You've got a big load of JavaScript in your pants! My suggestions would be (please don't be offended, as I'm sure you've already taken many of these steps):

• Make sure that you need all of these js files on the page. Are you using fancybox? Are you using cookie.js? If there are any js files that you can remove from the list, do so.
• Are any of these js files available over CDN ? jQuery is. jQuery UI is. This will reduce the load on your server, and many users may come to your site with cached versions of these js libraries already in their laps!
• Are there any lighter versions of your libraries that you could swap out for? If so, swap 'em!
• For those files that you're hosting locally, minify and mash them. If you're working in Visual Studio, you can use Chirpy or Combres . If you're not using Visual Studio, plenty of other cool tools are out there to help you reduce the size of your CSS and JS assets.
• Consider using Less for CSS and CoffeeScript for JS . They'll speed up your development cycle AND they'll pre-optimize a lot of your code (if you're lucky).
• Now that you've got one big mashed, minified, optimized JS file, you can cache it . This step is platform specific, so you might need to go searching around .

Did I miss anything crucial? Those are the quick steps that I take. I think.

Answer 2

我建议将所有这些文件缩小并合并到一个文件中-更少的HTTP请求=更快的加载时间

Answer 3

See If-Match and If-Modified-Since over here .

IIS will provide tag and last modified headers for any static content it returns, meaning static resources like js files will be automatically cached by the browser by default. Browser will attempt to fetch all those files on every page loads, but IIS will reutrn 304 and browser will use cached version. Yes, there is some processing time associated with making all those requests, but it is unlikely to have significant impact on your page load time. Also this will not help you in any way on your first page load, when you have to download those files no matter what.

Compare your first load time to the second and third. You can easily check that in Firebug. If they are not very different, then the issue is likely not the download size of js files, but rather complexity of the executed js code (assuming HTML loads quick enough).

Cut down on global initializers (ie code that is used only on 1 page, but executed for all pages on the site). Move code out of inline script tags and into the window load event. If done properly this is likely to help quiet a bit.

Answer 4

I like Minify .

It will do a lot more than cache the files on users' local machines, and its quite easy to get set up. One tip: don't try and develop/debug on your minified code! Keep a debug copy handy heh.

Here's a blurb from their front page, see if it fits your needs:

[Minify] combines multiple CSS or Javascript files, removes unnecessary whitespace and comments, and serves them with gzip encoding and optimal client-side cache headers