So lets deep dive into this.In the demo below I have used the following:
- Homepage of Facebook
- Firebug to debug the headers
- Firefox 5.0
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.
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 ...
