浏览器 http 缓存机制总结
http 报文头信息控制缓存介绍
Expires
指的是缓存过期的时间，超过这个时间就代表了资源的过期，另外需要注意的是 Expires 是 http/1.0 的标准，由于现在大多使用的是 http/1.1 的标准，而 http/1.1 中更多使用 cache-control ，当这两个同时存在的时候，cache-control 的优先级更高。
expires
Cache-control
Cache-Control 有多种字段可选，常见主要有下面这几种：
可缓存性
-
public
表示可以被任意地方缓存，比如请求的客户端、代理服务器等
-
private
表示只能被单个用户缓存，不能被代理服务器等缓存
-
no-cache
强制所有缓存了该响应的缓存用户，在使用已存储的缓存数据前，发送带验证器的请求到原始服务器
到期
-
max-age=< seconds >
指定了一个时间长度，表示在这个时间段内资源可以从缓存中获取，注意的是单位是 秒（ s ）。
-
s-maxage=< seconds >
覆盖max-age 或者 Expires 头，仅仅适用于共享缓存，在私有缓存会被忽略。
-
max-stale[=<seconds>]
这个表示可以接受过期的资源，但是过期的资源过期的时间不能大于这个字段指定的时间。
重新验证
-
must-revalidate
缓存在使用之前验证旧的资源的状态，并且不可以使用过期资源。
其它
-
no-store
不可以缓存服务器响应的资源，每次都重新请求资源。
Last-Modified/If-Modified-Since
Last-Modified
浏览器第一次请求服务器某个资源时，服务器响应报文中会带上一个这个标志，表示的是该响应资源最近一次修改的时间。
modified
If-Modified-Since
第一次请求某个服务器资源时，响应报文返回中的 Last-Modified 会被浏览器记录下来， 再次请求这个资源时，请求报文中会带上 If-Last-Modified 字段 并且值为 之前记录下来的时间。
if-modified-since
服务器接收到请求报文时拿到了 If-Modifie-Since 字段的值，用If-Modified-Since 这个值与该资源最近修改时间对比，如果 If-Modified-Since 时间早于资源最近修改时间，说明资源被更改过，则应该响应 新的资源（http 200）,反之说明资源没有被修改过，返回 http 304 通知浏览器可以继续使用缓存。
Etag/If-None-Match
类似 Last-Modified/If-Modified-Since，第一次请求时服务器响应 会带上 Etag 标志，指的是由服务器对该资源生成了一段 hash 字符串，之后的请求会带上 If-None-Match ， 服务器根据 If-None-Match 来 通知客户端是否使用缓存，如果资源 Etag 没有变化，通知客户端使用缓存，反之响应新的资源。
疑问
这几个头部字段功能有很多重叠啊，怎么使用？
首先，我们将这几种 http 缓存相关头部分为两种类型，强缓存和协商缓存，Expires 和 Cache-Control 为强缓存，Last-Modified/If-Modified-Since 和 Etag/If-None-Match 为协商缓存。
先通过 强缓存来判断资源是否过期，如果没有过期，则使用缓存。反之，我们通过协商缓存的来判断资源是否更改，如果更改过，则重新获取资源；在没有更改过的情况下，从缓存中读取。 详细过程如下：
首次请求：
firstrequest
再次请求
request
Etag 和 Last-Modified 的区别是啥？
- Last-Modified 只能精确到秒，所以一些实时性要求高的地方使用 Etag 较好；
- 对于定期生成的资源文件，Last-Modified 是变化的，导致客户端不能更好使用缓存，而 Etag 根据资源生成的 hash 字符串， 只要资源不变 Etag 就不会变化；
- Etag 的精度比 Last-modified 高，属于强验证，要求资源字节级别的一致，优先级高。如果服务器端有提供 ETag 的话，必须先对 ETag 进行 Conditional Request；
- 有些服务器不能精确得到资源最后修改时间。
总结
到现在，我们也就对 http 缓存机制有了一个较为全面的了解，可以借助它来提高我们网页的访问体验，并且减少不必要的资源浪费。
网友评论