What is the difference between Etag and Expires header?

Question

I know this question is asked several times. But still I do not quite understand this concept. After reading many blogs and answers in SO, what I got is

Expiry headers are used when you don't even want client (and proxies/caches) to make a request to the server. In ETAG, the client will check with the server for the update, but in expiry headers, the client will know, when to expire the file and check for an update, till then it (browsers and proxies/caches) won't bother server for checking the update. 

Therefore, it is mostly said that if we use the expires / max-age header, it does not even check the server for an updated file. So I decided to check it locally.

So, I created a simple html file including 2 js files and 1 image file. In IIS, I set the Expires header to 2 days for the image folder. So, in my understanding, after receiving the image file from the server once, for the next request, it should not send a request to the server to verify that the image file has been changed or not.

But every time I refresh the page, I see a request sent to the server, and the server returns the status 304 not modified . But according to the specifications / blogs I read, it should not send a request to the server.

Someone please explain.

Answer 1

For what you described

• Understandably, the ETag works as expected, responding with 304 not modified for the request with an If-None-Match field and ETag value.

  Now the browser will download the image from the cache, instead of receiving a new image from the bandwidth and server uptime.

• Caching seems to be disabled in your browser. Why a new request was sent before the cache expired, otherwise the request would not have been sent in the first place.

  Here's a great article that explains how to find browser caching disabled programmatically

  Here is another great article that explains the depth of caching and Etag.

Note:

Generally speaking, if you use multiple servers with a load balancer to host your website, then simple Etag configurations will probably cost more bandwidth by having Etag in its header and it has no purpose that checks if the browser cache is really (he always talks about an error)

Answer 2

The important part is what you said: refreshing the page. In this case, the browser tries to provide you with fresh content, so it has no choice but to contact the server and check all the resources. (There is an immutable cache management extension that prevents this behavior, but is not widely used and not used).

If you want to see the behavior of your browser that respects caches without reloading, you should use the "standard page entry". Either follow the link to the page or use another tab, and write the page url in the url line and press enter.

Caches take into account the expiration time, so if the document is not expired, it is returned from the cache. If it expires that the ETag is used to check the resource (and after checking it is possible that the resource is still not changed - answer 304)