HTML - How can I check if a file (.js or .css) was loaded or picked up from the cache?

Question

First, I needed a way to force browser always load .css and .js files. I solved it by putting a sufix in the files:

Before:

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

After:

<script type="text/javascript" src="file.js?v=1"></script>

That aparently worked.

Now, I need to know if that really worked. Sure, I can edit the file and check the changes in my browser but I need a way more specific, something like an option in the browser that show "File loaded from the cache" / "New file loaded from the folder".

Can you help me?

Answer 1

In a Chromium/Chrome browser open the Developer tools (alt + cmd/ctrl + I, or right click the window and hit inspect element), and then click the Network Tab it is the Size and Status properties that tell you if the asset came from browser cache, and whether a request was made to the server to check if the asset was stale.

The reason people may mistake 304 for the ideal in browser caching is if you check the response by sending a request via refreshing, the browser adds a header that forces a check against the server.

So if the asset/resource is saved in your browser, you'll always check the server for staleness and thus get a 304.

If you open up developer tools beforehand, then instead of refresh just click the address bar and hit enter, you should get a status: 200 OK size: (from cache).

If for any reason you don't see a column with size then right click the window and select it from the list of properties.

** NOTE: newer versions of Chrome look like they no longer send the forced revalidate header, if you refresh during the same browser session. Instead you'll see a 200: from memory cache.

Answer 2

It is browser responsibility area to load resources from server or take it from cache. From client code you cannot determine the source that was actually used (if you don't load resources dynamically using ajax). Only you can is look at the Network tab in Developer Tools (or Firebug).