CODEWITHSUNDEEP
javascriptcsshttpcaching
davidlee
davidlee

Reputation: 6167

Cache JavaScript & CSS on user's browser and load new one when changes are made

I would like user's browser to cache external .css and .js files. However, each time I made changes, I would want user's browser to be able to load the updated external files instead of using the previous cache.

I found out that by adding parameter when including ext .css and .js files will help. But when I did this, I found out that browser no longer cached the files but kept on loading the external files each time I visited the page. May I know how I can solve this?

Upvotes: 0

Views: 908

Answers (3)

TheHippo
TheHippo

Reputation: 63139

Basically you have 2 options:

  • Use Etag. If you hosting provider allows it you could configure Etag in a .htaccess file: <Directory /path/to/directory>
    FileETag INode MTime Size
    </Directory>

  • Not an parameter, add the version as a part of the filename. E.g.: style_10.css

Upvotes: 4

Patrice Neff
Patrice Neff

Reputation: 1524

To understand caching I recommend Mark Nottingham's caching tutorial: http://www.mnot.net/cache_docs/.

If you set the proper "Expires" headers the files will be cached even if you add dynamic URL parameters. For that is indeed the most efficient way to handle your problem.

Upvotes: 2

Ned Batchelder
Ned Batchelder

Reputation: 375544

Most web servers will use the files' modified dates to report whether files have changed to the browser. And browsers should correctly ask for files with an If-Modified header so that cached copies will be used.

Are you sure the browser isn't already doing the right thing?

Upvotes: 0

Related Questions