Browser caching is a deep topic, but I had an idea today.
One tradeoff used in browser-side caching is whether to use an expiration header or a etag header to control the browser cache.
Expiration headers can tell the browser “keep this file until this this date/time, and then you can retrieve it again”.
Etags send a custom hash or number to the browser and basically say “check with the server if the file is still this version, send the new one back if not”.
The etag header allows updating files almost immediately in the browser, since the browser still sends a request everty time to chec if the file has changed.
Expiration headers don’t have this fast turnaround- if you set the date way in the future, you won’t have a way to tell the browser “hey, this file changed, please re-download it!”.
So my idea is this: why not combine the benefits of the two, and include the etag value for linked files within the tags in the html?
For instance, when I retrieve index.html, and it include a logo.png file, we could make the tag look like this:
<img src=”/logo.png” etag=”5E451FFA498″ />
Then the browser can check this etag against the version already in the local cache, and does not need to make a request to the server for each file to re-check the etag on the files.