Why does this request return a 200(from cache) yet others return 304?

Question

Well I'm working on browser cache and write a node http server to help me learn, I used both cache-control and last-modified. Then enter this url in Chrome, and I simply press F5 to see if caching works .Finally the result seems a little strange . one return 200 and the others return 304 as excepted

Intro_1.jpg was loaded by style.css (background-image:url(../images/intro_1.jpg); ) So why this request return a 200(from cache) yet others return 304? Is that correct?

Answer 1

Yes, 200 vs 304 status codes always depend on whether the resource has "expired". You are correct, a status code of 200 means from the cache - no HTTP request was made - that's why you see From Memory Cache in DevTools. A status code of 304 means the cache entry had expired and the browser had no choice but to make a HTTP request to ask server if any changes have been made. The server returning a status code of 304 is a way of it telling the browser that it does not need to download a new version of the resource and it can keep using the same cache entry.

More: What is the difference between HTTP status code 200 (cache) vs status code 304?

Each resource has its own timeout value so it is possible that some will expire while others will not. You should check the HTTP responses in DevTool -- in the Network tab, click a request and on the right-hand side, click Response. You can see the expiry values the server gave to the browser. Check if the resources have different max-age, or if they have different last-modified. I'm sure that in this case, it does not matter that the jpg was in a CSS file.