How does browser work with expiration headers, cache-control headers, last-modified-header ?

Question

I am a web developer, have worked with PHP and .NET both. having over a year of experience working on web I haven't been able to understand the browser caching features thoroughly, I hope Web Gurus here can help me with it. Questions I have in my mind are :

• How does browser actually caches stuff, does it request for to see if the cached file has changed on the server or not,
• What is the Ideal way for a developer to make use of browser chaching to its full, but also to be able to push new changes on the site with no hassle at all. I think if browser somehow chaches my CSS and JS and Images, and then just makes a checks for their modification to the server everytime, this can sort the issue. but I am not sure how to do it,

waiting for interesting answers :)

Answer 1

With CSS files a standard "workaround" is to incrementally add a parameter to a link:

<link rel="stylesheet" href="http://mysite.com/styles.css?v=1"&gt;
<link rel="stylesheet" href="http://mysite.com/styles.css?v=2"&gt;
...

This will force a browser to reload the file.

Answer 2

This blog post may help:

http://blog.httpwatch.com/2007/12/10/two-simple-rules-for-http-caching/

It explains how to use of caching, whilst maintaining the ability to make changes when required.

Answer 3

http://www.enhanceie.com/redir/?id=httpperf