What is the difference between Etag and Expires header?

Question

I know this question is asked for several times. But Still I am not clear about the 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.

So basically it say if we use expires/max-age header , It will not even check for the server for an updated file. So I thought to test it locally.

So I have created on simple html file including 2 js files and 1 image file. In IIS , I have set the Expires header to 2 days for the image folder. So as per my understanding , after getting the image file from the server once, for next request it should not send a request to the server to check the image file is modified or not.

But what I got is each time I refresh the page I see a request sent to the server and the server returns a 304 not modified status. But as per the specs/blogs I read It should not send a request to the server.

Someone please explain.

Answer 1

For what you have described

• It is clear that ETag works as it expected to be by responding with 304 not modified for the request with If-None-Match field and ETag value.

  so now the browser will load the image from cache instead of getting a new image from server costing bandwidth and time.

• It seems that caching is disabled in your browser.That's why a new request has been sent before the cache expiration or else a request wouldn't have been sent in the first place.

  Here is a wonderful article that explains how to find caching is disabled in browser programatically

  Here is a another wonderful article that explains caching and Etag in depth.

Note:

Generally speaking If you are using multiple servers with load balancer to host your website then simple Etag configurations likely going to cost more bandwidth by having Etag in their header and it has no purpose which is checking if browser cache is valid.(Its always going to say invalid)

Answer 2

The important part is what you said: I refresh the page. In this case browser is trying provide you the fresh content so it has no other option than to contact server and check all resources. (There is cache control extension immutable which prevents this behaviour but is not widely used and implemented).

If you want to see behaviour of your browser which respects caches without reload you have to use "standard page entry". Either follow a link to the page or use another tab and write the page url to the url bar and press enter.

Caches respects expiration time so if document is not stale then is returned from the cache. If expired that ETag is used to validation of the resource (and after validation it is possible that resource is still not modified - 304 response)