4

在讲这几个属性之前,先复习下浏览器的缓存机制,再结合了解一下Last-Modified / If-Modified-Since、Etag / If-Match、cache-control / expires

浏览器缓存位置分为四种,其优先级顺序如下:
Service Worker、Memory Cache、Disk Cache、Push Cache,当上述四个缓存位置中的缓存都没有命中时,则会向服务器发起请求。
Service Worker: 不做了解;
Push Cache: 不做了解;
Memory Cache: 即内存中的缓存,其特点是容量小、读取高效、持续性短,会随着进程的释放而释放,在内存使用率低、缓存小尺寸资源时,会以 Memory Cache 为优先;
Disk Cache: 即磁盘中的缓存,其特点是容量大、读取缓慢、持续性长,任何资源都能存储到磁盘中,在内存使用率高、缓存大尺寸资源时,会以 Disk Cache 为优先;

缓存位置

浏览器缓存策略分为两种,强缓存和协商缓存:
强制缓存
用户发送的请求,直接从客户端缓存中获取,不发送请求到服务器,不与服务器发生交互行为。
协商缓存
用户发送的请求,发送到服务器后,由服务器判定是否从缓存中获取资源。

可用如下流程图来概括浏览器的缓存机制:
缓存机制

浏览器的缓存主要是针对静态资源进行缓存,如图片、文件、js等。

当用户发起请求时,浏览器先执行(a)步骤,查看是否有缓存,如果我们用的是谷歌浏览器,也可以在地址栏输入chrome://cache/查看你发起的请求链接是否在缓存列表中。如果想主动清除缓存,也可以在请求头信息中加入“Cache-Control: no-store”来禁止缓存。下次是缓存列表中打开的缓存:
图片描述

如果浏览器中有缓存则执行(b)步骤,查看缓存是否过期,主要是通过缓存中存储的响应头信息中的缓存标识字段 Expires 或 Cache-Control 来验证缓存资源是否过期。Expires 是服务器端在响应请求时用来规定资源的失效时间。Cache-Control 是服务器端在响应请求时用来规定资源是否需要被浏览器缓存以及缓存的有效时间等。Cache-Control 主要取值如下:
图片描述
缓存的时效由max-age决定。在max-age设定的时间内对当前资源发起访问后使用的都是浏览器内部的缓存!超过max-age设定的时间后浏览器会选择使用协商缓存。
响应头信息中的no-cahce,表示不使用强制缓存,直接进入协商缓存,请求头信息中的no-cache,则表示要重新获取请求,其作用类似于no-store,响应头信息的no-cache和max-age=0和请求头信息的max-age=0的作用是一样的:都要求在使用缓存之前进行验证。

Expires 是 HTTP 1.0 的字段,而 Cache-Control 是 HTTP 1.1 的字段,当 Expires 与 Cache-Control 同时存在时,Cache-Control 的优先级要高于 Expires。为了保证浏览器兼容,一般两个字段后端都会同时返回给前端,若是命中缓存(即存在缓存资源并且缓存资源未过期),则浏览器响应 HTTP Status Code 200,并直接使用缓存资源作为返回结果,不需要发起 HTTP 请求,为强制缓存;若是存在缓存资源但缓存资源已过期,则进入下一步骤协商缓存

(c)协商缓存相关的缓存标识字段是 Last-Modified 和 Etag。
Last-Modified 是服务器端在响应请求时用来说明资源的最后修改时间。与之对应的是 If-Modified-Since 字段,在协商缓存过程中,浏览器发送的 HTTP 请求中 Header 中会带上 If-Modified-Since 字段,值为缓存资源 Last-Modified 属性的值。
当服务器端接收到带有 If-Modified-Since 的请求时,则会将 If-Modified-Since 的值与被请求资源的最后修改时间做对比。如果相同,说明资源没有新的修改,则响应 HTTP Status Code 304,浏览器会继续使用缓存资源;如果最后修改时间比较新,则说明资源被修改过,则响应 HTTP Status Code 200,并返回最新的资源。
图片描述
Etag 是服务器端在响应请求时用来说明资源在服务器端的唯一标识。与之对应的是 If-None-Match 字段,在协商缓存过程中,浏览器发送的 HTTP 请求中 Header 中会带上 If-None-Match 字段,值为该缓存资源 Etag 属性的值。
当服务器端接收到带有 If-None-Match 的请求时,则会将 If-None-Match 的值与被请求资源的唯一标识做对比。如果相同,说明资源没有新的修改,则响应 HTTP Status Code 304,浏览器会继续使用缓存资源;如果不同,则说明资源被修改过,则响应 HTTP Status Code 200,并返回最新的资源。
图片描述
Last-Modified 是 HTTP 1.0 的字段,而 Etag 是 HTTP 1.1 的字段,当 Last-Modified 与 Etag 同时存在时,Etag 的优先级要高于 Last-Modified。Etag 的出现主要是为了解决 Last-Modified 存在的问题。

最后,最新请求下来的资源,浏览器会根据Expires 与 Cache-Control判断是否进行缓存。

<完>


广州鹏少
87 声望4 粉丝