浏览器通过HTTP头部的字段来控制文件的缓存:要不要缓存以及缓存的过期时间。
Cache-Control和Expires控制文件的缓存,在缓存文件的有效时间内,浏览器直接使用本地文件,不与服务器交互。
Cache-Control的值是一个单位为秒的数字,表示缓存文件的有效时间有多少秒。 Expire的值是一个绝对时间点,表示缓存文件在某个时间点之前有效。
在Cache-Control和Expires同时存在的情况下,Cache-Control的优先级高于Expires。
下面举例说明:
缓存文件的有效时长为600秒。在接下来600s内,如果有请求这个资源的,浏览器不会发出请求,而是直接使用本地缓存的文件。
告诉浏览器不要缓存这个文件。
缓存文件在2025-11-24 02:32:46 GMT之前有效。
告诉浏览器不要缓存这个文件。
Last-Modified的值是一个绝对时间点,表示文件最近一次修改的时间。 Etag的值是一个文件的hash。
与上面的Cache-Control和Expire不同,如果只使用Last-Modified/Etag对文件的缓存进行控制。那每次访问文件的时候,浏览器会向服务器发起304请求,如果文件没有被修改,则使用本地文件,否则从服务器获取文件。
当Last-Modify或者Etag两者有一个和服务器上的文件相同时,则浏览器认为文件没有更新,直接使用本地缓存文件。
例子:
缓存文件的上次更新的时间是2016-04-21 03:17:22 GMT。
缓存文件的哈希值是27b7-5256d6aeaf7c0。
强制使Cache-Control/Expires失效:Cache-Control: max-age=0 此时,如果文件还使用了Last-Modified/Etag进行缓存控制,则向服务器发起304请求。
强制使上面两种浏览器缓存失效:
Cache-Control:no-cache Pragma:no-cache
理想的缓存机制应该是这样的:
第4,5属于浏览器的内部机制,我们无法控制。
对于1,使用Cache-Control可以实现(Cache-Control的优先级高于Expires)。 对于2,使用Last-Modified或者Etag可以实现(两者可以一起使用)。 对于3,我们采用每次发布,在要缓存的资源文件名中加上版本号或文件MD5值字串的方法来实现(修改缓存文件的文件名)。
当然,这里要注意一点就是“入口”文件(html文件)是被设置为不缓存的,如Google,百度的html页面:
www.google.com.hk
www.baidu.com