Tuesday, July 12, 2011

Browser internals when it comes to "Caching"

So as mentioned in one of my previous articles My take on Optimizing HTTP Caching for your web application there are two response headers that any browser depends upon for caching a file i.e Last-Modified time and (max-age or Expires)

So lets deep dive into this.In the demo below I have used the following:
When you browse the homepage notice that for any static file (in this case I have picked up a css file) there is always a Last-Modified and an Expires.

There are multiple ways you could browse a website .I have broken them down below:

1) The General way  : 
This is the mostly used way.I say this because in general a user will keep clicking links and browse the website. Here for any GET requests for a static file 
  • The browser will first check if the file is present in its cache. 
  • If the file is present , the browser will check if file is not stale. It does this by verifying that the max age or expires value for that file has not been reached . 
  • If the file in the cache is stale, it will make a request to the server using a conditional GET.
This is how the headers look when the browser makes a conditional GET

Notice the browser sends a If-Modified-Since header in the request .The value of which is the Last Modified timestamp it got when it last received the file from the server. The server on receiving the conditional GET request will either reply with the new file content or a 304 "Not Modified".

2) Forcing the browser to make a conditional GET
This can be done by hitting F5 on the page.Notice that when this is done the browser forces a conditional GET.

3) Forcing the browser to get the file from the server
This can be done by hitting a CTRL+F5 (Windows) or COMMAND+SHIFT+R (MAC). When this is done notice that the browser sends a request without a If-Modified-Since header.Hence this request will hit the server and not get served from the browser's cache or the proxy cache if any.

Till next time ...