CODEWITHSUNDEEP
google-chromegoogle-chrome-devtoolsbrowser-cache
Andy Noelker
Andy Noelker

Reputation: 11269

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.

Upvotes: 2

Views: 1435

Answers (3)

Ivo Andonov
Ivo Andonov

Reputation: 81

I came accross this post while researching the same effect by using a javascript location.reload(). What I did instead was a 

location.href = location.href;

The resource that was needed to be reloaded did actually reload as it is a PHP generated one having the following (copied from another stackoverflow question):

header("Cache-Control: no-cache, no-store, must-revalidate"); // HTTP 1.1
header("Pargma: no-cache"); // HTTP 1.0
header("Expires: 0 "); // Proxies

Upvotes: 0

Cheesy
Cheesy

Reputation: 339

Are you using any external scripts on that page?

Like Gravatar or something similar...

According to an answer from here : https://superuser.com/questions/89809/how-to-force-refresh-without-cache-in-google-chrome

It could be from headers sent by a third party script that your browser interpret as old and so on... there are so many possible explanations.

In my case Gravatar was the problem (old headers sent). Hope this will help you as well.

Upvotes: -1

ceejayoz
ceejayoz

Reputation: 180137

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.

Upvotes: 3

Related Questions