浏览器通过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
利用浏览器缓存
理想的缓存机制应该是这样的：
- 缓存文件没更新，尽可能使用缓存，不用和服务器交互；
- 当用户刷新时，尽可能减少浏览器和服务器之间的数据传输；
- 缓存文件有更新时，第一时间能使用到新的文件；
- 缓存的文件要保持完整性，不使用被修改过的缓存文件；
- 缓存的容量大小要能设置或控制，缓存文件不能因为存储空间限制或过期被清除。
第4，5属于浏览器的内部机制，我们无法控制。
对于1，使用Cache-Control可以实现（Cache-Control的优先级高于Expires）。
对于2，使用Last-Modified或者Etag可以实现（两者可以一起使用）。
对于3，我们采用每次发布，在要缓存的资源文件名中加上版本号或文件MD5值字串的方法来实现（修改缓存文件的文件名）。
当然，这里要注意一点就是“入口”文件（html文件）是被设置为不缓存的，如Google，百度的html页面：
