浏览器 http 缓存机制总结

浏览器 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[=]

  这个表示可以接受过期的资源，但是过期的资源过期的时间不能大于这个字段指定的时间。

重新验证

• 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 的区别是啥？

1. Last-Modified 只能精确到秒，所以一些实时性要求高的地方使用 Etag 较好；
2. 对于定期生成的资源文件，Last-Modified 是变化的，导致客户端不能更好使用缓存，而 Etag 根据资源生成的 hash 字符串， 只要资源不变 Etag 就不会变化；
3. Etag 的精度比 Last-modified 高，属于强验证，要求资源字节级别的一致，优先级高。如果服务器端有提供 ETag 的话，必须先对 ETag 进行 Conditional Request；
4. 有些服务器不能精确得到资源最后修改时间。

总结

到现在，我们也就对 http 缓存机制有了一个较为全面的了解，可以借助它来提高我们网页的访问体验，并且减少不必要的资源浪费。