http got 304 but still download content

Question

I requested a html file, and I got http status code 304. I know it means the content hasn't been modified.So browser can use cache. But I noticed in the request timing info content downloading used 2.63s.

I debugged with Chrome dev tools.

Since browser had cache, why it still downloaded content?

Moral

Answer 1

Checkout the difference between freshness and stale state of cache.

Stage 1: Requesting for very 1st time. Made request to server and got resources. Each resource is fetched freshly

In my case, headers for my js files is cache-control:public, max-age=3, meaning, cache becomes stale from fresh in 3 seconds(pretty less time taken to demonstrate difference)

State 2: Again requesting (Ctrl+Refresh). Now, since my cache is stale, it sends requests to server, which tells that resource are not modified. Hence those resources AREN'T fetched entirely. Only the headers are fetched. Carefully note the bytes(~220bytes for each) transfer in each case which is only for headers of those resources. Hence 304(Not Modified) saved the lot of kbs in not transferring body again. Freshness of my resources was STALE which is why it sent request to server

And when you check the body, the response in 2nd is same as 1st, BUT body is taken from stale cache and the resource cache is again marked FRESH for 3 seconds.

Note, in my case, I can optimise by setting cache max-age to be 1 year(some high no.) because I'm using chunkhash for each file which would tell browser to not make request to server and directly take from cache which gives response 200 (from cache) as you can see analytics file in Stage2 whose headers are cache-control:public, max-age=7200

Lawtun

Answer 2

Chrome is doing a request to ask the server if the cache should be used. Server responds with 'HTTP/1.1 304 Not Modified' and some extra info. You can read more about this in here.

Total response size is usually under 1KB so 2.63 is either in ms or the total time for that request. You can read more about resource network timing in here.

Update:

As Ali correctly pointed out, content downloading will account for cache retrieval. Depending on file size and system configuration this may take a while.

A more detailed explanation about caching here.

Chrome extensions might slow down as well - more here.

Wesla

it is not true for my situation. content (static) size is about 6Mb – Guru

@Ali: not sure I follow. What's not true? Please note that the above size refers to a "304-Not modified" only. The non-cached response will, of course, vary. – Wesla

I am testing with 304 too. Please, look at here #33251302 – Guru

I have the same problem, and none of the answers can explain it: Google Chrome, url: d301sr5gafysq2.cloudfront.net/6533ea311688/dist/webpack/… , size: 10MB. 1st download takes ages (23sec - 100+sec) This is not my problem. But refesh also takes 2-3sec with content download being most of it even though it got http response code 304 and the actual downloaded size was 408 bytes. However if I download the file and then open it as file:///tmp/vendor.js then it loads in 15-50ms – Indistinctive