HTTP缓存与Chrome浏览器的缓存协作 研究

前言

网页与网页资源的缓存是浏览器与服务器端共同协作完成的。主要参与者 Cache-Control、Etag、LastModified三者。

Cache-Control

Cache-Control扮演着缓存最主要的角色，Etag与LastModified是协商缓存的主要角色。

取值为no-store

当相应头中有Cache-Control no-store的时候。浏览器不会使用任何缓存，也不会有任何协商缓存参与(etag与LastModified).

取值为no-cache

Cache-Control为no-cache的时候会先去进行协商缓存即通过etag或者LastMdoified进行验证本地的缓存是否有效。当服务端验证后告诉浏览器你那边的缓存可以用（即返回304）或者不可以（返回200状态并返回对应的内容）。注意Cache-Control为maxage=0时与no-cache效果相同

取值为must-revalidate

Cache-Control为must-revalidate时，会在使用缓存前进行缓存验证，验证方式与no-cache有所不同。no-cache永远都会使用协商缓存。但是must-revalidate会由浏览器自身新鲜度检测策略来定。对于html文件来说会一直使用协商缓存，但是对于js,css，img对象就不一样，如果在短时间内再次访问该资源一般会从memory-cache或者diskcache中获取，有时候又会通过协商缓存。

取值为max-age > 0s 单位秒

Cache-Control为max-age > 0 。所有资源都会缓存到指定秒数之前，在缓存期间原则上永远也不会访问服务器。注意我加了一个“原则上”是因为我在用Chrome测试时遇到了这个请。当我刷新时，对应url地址的html文件会使用协商缓存，但是当我在一个空标签输入这个url地址点击回车时，这个html文件会是disk-cache。

Etag

Etag时通过为文件计算一个指纹值，返回给浏览器，浏览器记住这个指纹。当使用浏览器进行缓存验证是，会发送请求头 If-None-Match=指纹（If-None-Match顾名思义如果指纹不匹配你就给我返回新的数据），服务端发现请求头中存在If-None-Match就会去匹配新的指纹，如果相等则范围304否则范围200和数据内容

LastModified

LastModifed顾名思义是通过文件的最后修改时间来校验缓存。浏览器进行缓存校验是，会发送请求头
If-Modified-Since=最后修改时间（顾名思义如果文件的修改时间大于了我发送给你的时间，你服务器就必须返回新数据给我），服务器发现请求头中存在If-Modified-Since则会去使用修改时间器对比发现在给定时间之后修改我就返回新数据给浏览器否则返回304。

据我猜测如果同时存在If-Modified-Since和If-None-Match头浏览器应该优先使用If-None-Match。