Search code examples
google-chromegoogle-chrome-devtoolsbrowser-cache

Normal reload in Chrome does not use cache

I'm having an issue where doing a normal reload in Google Chrome fetches all of my javascript files from the server instead of pulling them from the browser cache. Strangely enough, if I directly load the site by putting my cursor in the address bar and pressing Enter, then the browser cache gets used (as expected). My "Disable cache" checkbox in the dev tools is unchecked so it cannot be that.

Let's look at a quick example of this behavior by loading a simple HTML page that includes the jQuery hosted library.

From the address bar

When I enter a webpage from the address bar and hitting Enter I can see in the dev tools that jQuery is getting loaded from the browser cache.

enter image description here

Normal Reload

If I select to do a "Normal Reload" by right-clicking the Refresh button with dev tools open or hit F5, then the cache does not get used. This is the issue. enter image description here You can clearly see that it returned a status of 304 and according to this question it should be using a local version of the file in that instance. But it is clearly requesting a new version. In fact, it seems to work almost the same as...

Empty Cache and Hard Reload

I just wanted to compare the responses with a hard reload and clear cache. Outside of returning a 200 instead of a 304 it seems to be the same as a normal reload. In fact, this request went faster for some reason. enter image description here

Can anyone explain why the normal reload is different from accessing the page from the address bar and does not use the cache? I'm using Chrome version 53.0.2785.143.

Solution

  • Your screenshots demonstrate two significant things:

    • The 304 only incurred 119 bytes of network transfer. The file itself is correctly being loaded from cache. There's still latency for the HTTP request, but on a slow connection (there are still folks on AOL dialup or EDGE mobiles, remember) the difference between 119 bytes and 33,000 bytes is going to become far more significant.
    • Your 200 request is indeed faster than your 304 request, but that's a one-off. A subsequent try could invert that. You'd need to do a proper benchmarking with dozens (if not hundreds/thousands) of requests to ensure those numbers hold up (as they could easily be related to network conditions, hitting a slow CDN server at Google, etc.).

    As for the difference between Enter and F5/Reload, see What's the difference between "Normal Reload", "Hard Reload", and "Empty Cache and Hard Reload" in chrome?. The TL;DR version: the cache is indeed used (hence the tiny bytes transferred), but it's revalidated with the server via the request that's getting the 304.