浏览器缓存机制

浏览器通过HTTP头部的字段来控制文件的缓存：要不要缓存以及缓存的过期时间。

Cache-Control/Expires

Cache-Control和Expires控制文件的缓存，在缓存文件的有效时间内，浏览器直接使用本地文件，不与服务器交互。

Cache-Control的值是一个单位为秒的数字，表示缓存文件的有效时间有多少秒。
Expire的值是一个绝对时间点，表示缓存文件在某个时间点之前有效。

在Cache-Control和Expires同时存在的情况下，Cache-Control的优先级高于Expires。

下面举例说明：

• Cache-Control: max-age=600

缓存文件的有效时长为600秒。在接下来600s内，如果有请求这个资源的，浏览器不会发出请求，而是直接使用本地缓存的文件。

• Cache-Control: private

告诉浏览器不要缓存这个文件。

• Expires: Mon, 24 Nov 2025 02:32:46 GMT

缓存文件在2025-11-24 02:32:46 GMT之前有效。

• Expire: -1

告诉浏览器不要缓存这个文件。

Last-Modified/Etag

Last-Modified的值是一个绝对时间点，表示文件最近一次修改的时间。
Etag的值是一个文件的hash。

与上面的Cache-Control和Expire不同，如果只使用Last-Modified/Etag对文件的缓存进行控制。那每次访问文件的时候，浏览器会向服务器发起304请求，如果文件没有被修改，则使用本地文件，否则从服务器获取文件。

当Last-Modify或者Etag两者有一个和服务器上的文件相同时，则浏览器认为文件没有更新，直接使用本地缓存文件。

例子：

• Last-Modified: Thu, 21 Apr 2016 03:17:22 GMT

缓存文件的上次更新的时间是2016-04-21 03:17:22 GMT。

• ETag: "27b7-5256d6aeaf7c0"

缓存文件的哈希值是27b7-5256d6aeaf7c0。

强制刷新

• F5

强制使Cache-Control/Expires失效：Cache-Control: max-age=0
此时，如果文件还使用了Last-Modified/Etag进行缓存控制，则向服务器发起304请求。

• Ctrl+F5

强制使上面两种浏览器缓存失效:

Cache-Control:no-cache
Pragma:no-cache

利用浏览器缓存

理想的缓存机制应该是这样的：

1. 缓存文件没更新，尽可能使用缓存，不用和服务器交互；
2. 当用户刷新时，尽可能减少浏览器和服务器之间的数据传输；
3. 缓存文件有更新时，第一时间能使用到新的文件；
4. 缓存的文件要保持完整性，不使用被修改过的缓存文件；
5. 缓存的容量大小要能设置或控制，缓存文件不能因为存储空间限制或过期被清除。

第4，5属于浏览器的内部机制，我们无法控制。

对于1，使用Cache-Control可以实现（Cache-Control的优先级高于Expires）。
对于2，使用Last-Modified或者Etag可以实现（两者可以一起使用）。
对于3，我们采用每次发布，在要缓存的资源文件名中加上版本号或文件MD5值字串的方法来实现（修改缓存文件的文件名）。

当然，这里要注意一点就是“入口”文件（html文件）是被设置为不缓存的，如Google，百度的html页面：

www.google.com.hk

www.baidu.com