What happens when you click on F5 - Refresh button of browser

You can ask browser to ignore content from its cache and get new content from originating server by clicking on F5 or Shift + F5(Firefox) or Ctrl + F5(Internet explorer). I did some research on how Firefox handles refresh button

I have a simple html page on Apache Server and it has a static image which is also served by Apache Http Server. My Http Server is configured to set cache time of 3 months for images like this


ExpiresActive On 

<FilesMatch "\.(gif|jpg|jpeg|png|swf)$">
ExpiresDefault "access plus 3 month"
Header append Cache-Control "public,s-maxage=2592000"
</FilesMatch>


h4. Refresh

I went to the html page first and i did let the image download, now if i access the html page it does not download the image at all. So i did go to the page and i clicked on F5(Refresh) in firefox and this is what i saw



When we click Refresh button the Firefox is ignoring the cached copy of image and it is setting following additional headers 

If-Modified-Since Thu, 15 Jul 2010 22:54:21 GMT
If-None-Match "9c334-9933-fba1e140"
Cache-Control max-age=0


The browser is sending the If-Modified-Since and If-None-Match as it does for any validation request. But in addition to that it is sending max-age=0, which means that if the request goes through proxy, it is telling the proxy that, it will not accept cached resource, instead proxy should check with the originating server to see if the response that it has is fresh, by sending conditional get.

When we click on Refresh button the browser will send Cache-Control max-age=0 for all the embedded request.

Important Note: When you send F5 request, it will result in end-to-end invalidation, so if the image is not actually changed then originating server will send HTTP 304 response

h4. Shift + F5/ Ctrl + F5

When you click on F5, your sending end to end validation request, that means every component in the chain should verify with the originating server if the cached copy that it has is fresh if not get fresh copy. But what if you dont want cached copy at all instead you want fresh response from the orignating server, in that case you should click Shift + F5 in firefox or Ctrl + F5 in IE. I tried that on my test page and this is what happens




If you look at the request header you will notice two things there is no If-Modified-Since or If-None-Match validation header and there are these two additional headers


Pragma no-cache
Cache-Control no-cache


The Cache-control: no-cache header tells the proxy that request is going through that it wont accept any cached response. So proxy must make request to originating server. Now since the request header does not have any If-Modified-Since or If-None-Match header, it cant return 304, instead it must return the full body of response with 200 status code. This will overwrite the cached copy.

Important Note: When you send Shift + F5 request your saying that it should be end to end full response fetch and originating server must send the new full copy

1 comment: