浏览器缓存机制

57 阅读2分钟

image.png

强缓存

指缓存在浏览器端的,无需建立请求,有如下两种:

  1. memory cache 缓存在内存中
  2. disk cache 缓存在磁盘中 当你的网页请求资源时,浏览器怎么判断该使用强缓存呢?答案是通过http请求头
  • Expires

    Expireshttp1.0 时的规范,就是一个资源的失效时间,如果服务端和客户端时间不统一会有问题。

  • Cache-Control

    Cache-Controlhttp1.1时出现的,主要是利用该字段的 max-age 值来进行判断,它是一个相对时间,例如 Cache-Control:max-age=3600,代表着资源的有效期是 3600 秒。cache-control 除了该字段外,还有下面几个比较常用的设置值:

no-cache:需要进行协商缓存,发送请求到服务器确认是否使用缓存。

no-store:禁止使用缓存,每一次都要重新请求数据。

public:可以被所有的用户缓存,包括终端用户和 CDN 等中间代理服务器。

private:只能被终端用户的浏览器缓存,不允许 CDN 等中继缓存服务器对其缓存。

Cache-ControlExpires 可以在服务端配置同时启用,同时启用的时候 Cache-Control 优先级高。

协商缓存

当强缓存没有命中的时候,浏览器会发送一个请求到服务器,服务器请求头中Last-Modify/If-Modify-SinceETag/If-None-Match来判断是否命中缓存。如果命中,则返回 304 ,告诉浏览器资源未更新,可使用本地的缓存。

  • Last-Modify/If-Modify-Since(响应头/请求头,这两值是一样的)

    浏览器第一次请求一个资源的时候,响应头会加上 Last-ModifyLast-modify 是一个时间标识该资源的最后修改时间。

当浏览器再次请求该资源时,请求头中会包含 If-Modify-Since,该值为缓存之前返回的 Last-Modify。服务器收到 If-Modify-Since 后,根据资源的最后修改时间判断是否命中缓存。

如果命中缓存,则返回 304,并且不会返回资源内容,并且不会返回 Last-Modify

  • ETag/If-None-Match(响应头/请求头,这两值是一样的)

    ETag返回的是一个校验码。ETag 可以保证每一个资源是唯一的,资源变化都会导致 ETag 变化。服务器根据浏览器上送的 If-None-Match 值来判断是否命中缓存。

Last-ModifiedETag 是可以一起使用的,服务器会优先验证 ETag,一致的情况下,才会继续比对 Last-Modified,最后才决定是否返回 304