2

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.

Community
  • 1
  • 1
Andy Noelker
  • 10,949
  • 6
  • 35
  • 47

3 Answers3

3

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.

Community
  • 1
  • 1
ceejayoz
  • 176,543
  • 40
  • 303
  • 368
  • 1
    IMO, the Chrome Inspector should say "119 b | (from cache)" to be a little clearer. – ceejayoz Oct 05 '16 at 19:55
  • Thanks for the response! I did read that other question pretty thoroughly before I posted this and even referenced it in my post. I guess I'm a little confused why hitting Enter from the address bar would be not completely identical to a Normal Reload (i.e. they would both return `304`s then)? Maybe that goes outside the scope of the question, but if hitting Enter from the address bar is not considered a Normal or Hard reload...then *what* is it considered? – Andy Noelker Oct 05 '16 at 19:59
  • @AndyNoelker Enter is "go here". Reload is a more explicit choice to reload the page you're already on - it's reasonable to assume you may be wanting to refresh assets by doing so. – ceejayoz Oct 05 '16 at 20:00
  • Alright that makes sense. I wish that was all a little more obviously displayed (I agree wholeheartedly with your first comment). Thanks for the reply! – Andy Noelker Oct 05 '16 at 20:01
  • @AndyNoelker Yeah, I definitely get your confusion here. Glad I could help. :-) – ceejayoz Oct 05 '16 at 20:01
0

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
Ivo Andonov
  • 46
  • 5
-1

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.

Community
  • 1
  • 1
Cheesy
  • 339
  • 3
  • 6