Question

I have a really simple site that I created. I am trying to test JS caching in the browser but it doesn’t seem to be working. I thought that most major browsers cached your JS file by default as long as the file name doesn’t change. I have the site running in IIS 7 locally.

For my test I have a simple JS file that is doing a document write on body load. If I make a change to the JS file (change the text the document write is writing), then save the file, I see that updated when refreshing the browser. Why is this? Shouldn’t I see the original output as long as the JS file name hasn’t changed?

Here is the simple site I created to test.

Answer 1

When you refresh your browser, the browser sends a request to the server for all the resources required to display the page. If the browser has a cached version of any of the required resources, it may send an If-Modified-Since header in the request for that resource. When a server receives this header, rather than just serving up the resource, it compares the modified time of the resource to the time submitted in the If-Modified-Since header. If the resource has changed, the server will send back the resource as usual with a 200 status. But, if the resource has not changed, the server will reply with a status 304 (Not Modified), and the browser will use its cached version.

In your case, the modified date has changed, so the browser sends the new version.

The best way to test caching in your browser would probably be to use fiddler and monitor requests and responses while you navigate your site. Avoid using the refresh button in your testing as that frequently causes the browser to request fresh copies of all resources (ie, omitting the If-Modified-Since header).

Edit: The above may be an over-simplification of what’s going on. Surely a web search will yield plenty of in-depth articles that can provide a deeper understanding of how browser caching works in each browser.