浏览器缓存

风流意气都作罢 提交于 2020-03-16 20:17:48

1、基本介绍

浏览器缓存是指浏览器会存储用户最近请求过的资源,当用户再次请求同一资源时,浏览器可以直接从本地读取

这样,不仅可以提高浏览器的加载速度,也能减轻服务器的负载压力,可以说是一举两得

具体而言,浏览器的缓存策略分为两种,一种是强缓存(又称本地缓存),一种是弱缓存(又称协商缓存)

它们的行为会根据响应头和请求头的特定字段决定

  • 强缓存与 expirescache-control 字段有关

  • 弱缓存与 etag / if-none-matchlast-modified / if-modified-since 字段有关

2、本地缓存

本地缓存:当一个请求发生时,浏览器自己决定是否从缓存中读取数据

在浏览器第一次请求资源时,服务器会返回资源,并在响应中设置 expirescache-control 字段

然后浏览器会把这些信息都缓存下来,当再次请求资源时,浏览器先不向服务器发送请求

而是根据该资源的 expirescache-control 字段判断缓存的资源是否已经失效

如果缓存没有失效,那么直接读取缓存拿到资源

  • exprise:表示这个资源的失效时间,它的值是一个绝对时间的 GMT 格式字符串

  • cache-control:表示这个资源的失效时间,主要通过该字段的 max-age 进行设置,它的值是一个相对时间

    此外,这个字段还能设置其它的值,不同的值表示不同的含义,列举如下:

    no-cache 表示不使用本地缓存,而使用协商缓存;no-store 表示禁止浏览器缓存资源

    public 表示允许被所有用户缓存,包括 CDN 等中间代理服务器;private 表示只能被终端用户缓存

注意,由于 exprise 使用的是绝对时间,如果服务端和客户端的系统时间相差较大,容易出现缓存混乱

exprisecache-control 可以同时设置,在同时设置的情况下 cache-control 的优先级高于 exprise

3、协商缓存

协商缓存:当一个请求发生时,由服务器来决定是否从缓存中读取数据

在浏览器第一次请求资源时,服务器会返回资源,并在响应中设置 last-modifiedetag 字段

然后浏览器会把这些信息都缓存下来,当再次请求资源时,浏览器会发送一个 Conditional GET 请求

并在请求中带上 if-modified-sinceif-none-match 字段

服务器根据 if-modified-sinceif-none-match 字段的值判断缓存的资源是否已经失效

如果缓存没有失效,那么返回 304,但不返回资源,浏览器收到 304 后就从缓存中读取资源

如果缓存已经失效,那么返回 200,并且返回资源,浏览器收到 200 后它就使用返回的资源

注意哦,last-modifiedif-modified-since 是成对出现的,etagif-none-match 是成对出现的

  • last-modifiedif-modified-since

    last-modified 表示这个资源的最后修改时间,if-modified-since 的值就是 last-modified 的值

    如果服务器判断缓存没有失效,也就意味着资源没有被修改,所以也不用返回 last-modified

  • etagif-none-match

    etag 它是这个资源的唯一标识,当资源变化时,etag 也会变化,if-none-match 的值就是 etag 的值

    如果服务器判断缓存没有失效,由于 etag 可能会重新生成,即使值没有变化,所以始终会返回 etag

last-modifiedetag 可以同时设置,在同时设置的情况下 etag 的优先级高于 last-modified

4、完整过程

在实际使用中,本地缓存和协商缓存一般都会同时使用,一个完整的过程如下:

  • 浏览器在第一次请求资源时,会缓存资源和相关的信息

    在之后的请求中,通过本地缓存和协商缓存策略,决定是否从缓存中读取资源

  • 首先检查本地缓存

    浏览器检查该资源的 expirescache-control 字段,判断资源是否过期

    如果资源没有过期,那么直接从缓存中读取,整个过程到此结束;如果已经过期,那就继续走下面的流程

  • 然后检查协商缓存

    如果该资源有 etag 字段,那么向服务器发送一个 Conditional GET 请求,带上 if-none-match 字段

    或者该资源有 last-modified 字段,也发送一个 Conditional GET 请求,带上 if-modified-since 字段

    然后,服务器根据 if-none-matchif-modified-since 字段,判断缓存是否失效

    如果缓存没有失效,那么返回 304,但不返回资源,浏览器收到 304 后就从缓存中读取资源

    如果缓存已经失效,那么返回 200,并且返回资源,浏览器收到 200 后它就使用返回的资源

5、用户行为

用户在浏览器上进行的操作对浏览器缓存的使用方式有很大的影响

比如,在地址栏输入链接进入页面、通过前进后退进入页面等的行为都会同时启用强缓存和弱缓存

但普通刷新 ( F5 ) 会忽略强缓存而启用弱缓存,而强制刷新 ( Ctrl + F5 ) 会同时忽略强缓存和弱缓存

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!