浏览器的缓存机制 - 知乎 可以多想一想系统时间的问题
想要加快浏览器加载网络资源的速度,有以下方法:
- 减少响应内容大小:如使用 HTTP/2 的压缩头部功能和 gzip 算法压缩响应体内容
- 使用「缓存」:把一些资源存储下来,从而无需再次加载
使用缓存要尽可能地让浏览器从缓存中获取资源,并保证被使用的缓存与服务端最新的资源保持一致。一般只缓存静态资源(js、css、img)
Web 缓存按存储位置来区分,包括数据库缓存、服务端缓存、CDN 缓存和浏览器缓存。这里我们着重介绍一下浏览器缓存。
浏览器缓存通过 HTTP/HTTPS 实现,存储位置有四种:
- Service Worker
- Memory Cache(内存缓存)
- Disk Cache(硬盘缓存)
- Push Cache(推送缓存)
以上缓存全部没有命中就会进行网络请求。
Service Worker
Service Worker 是运行在浏览器背后的独立线程,可以用来实现缓存功能。使用 Service Worker 的话,传输协议必须为 HTTPS。因为 Service Worker 中涉及到请求拦截,所以必须使用 HTTPS 协议来保障安全。Service Worker 的缓存与浏览器其他内建的缓存机制不同,它可以让我们自由控制缓存哪些文件、如何匹配缓存、如何读取缓存,并且缓存是持续性的。
Memory Cache
Memory Cache 是内存中的缓存,主要包含的是当前中页面中已经抓取到的资源,例如页面上已经下载的样式、脚本、图片等。读取内存中的数据高效,但是缓存持续性很短。一旦我们关闭 Tab 页面,内存中的缓存也就被释放了。而且由于计算机中的内存比硬盘容量小得多,我们能够使用存储缓存的内存并不多。
内存缓存在缓存资源时并不关心返回资源的 HTTP 缓存头 Cache-Control,同时资源的匹配也并非仅仅是对 URL 做匹配,还可能会对 Content-Type,CORS 等其他特征做校验。
Disk Cache
Disk Cache 是存储在硬盘中的缓存,读取速度比 Memory Cache 慢,但是存储量更大。它会根据 HTTP Herder 中的字段判断哪些资源需要缓存,哪些资源可以不请求直接使用,哪些资源已经过期需要重新请求。
Push Cache
Push Cache(推送缓存)是 HTTP/2 中的内容,当以上三种缓存都没有命中时,它才会被使用。它只在会话(Session)中存在,一旦会话结束就被释放,并且缓存时间也很短暂,在Chrome浏览器中只有5分钟左右,同时它也并非严格执行HTTP头中的缓存指令。
浏览器什么时候会把缓存存储到内存中,什么时候存储到硬盘中呢?一般来说:
- 小文件优先存储到内存中,反之存储到硬盘中
- 使用频率高的缓存到硬盘中
我们讲到 Disk Cache 时说道浏览器会严格按照 HTTP 缓存规则存储缓存,那么 HTTP 缓存规则是什么呢?
HTTP 缓存
根据是否需要向服务器重新发起 HTTP 请求,将缓存过程分为两个部分:强制缓存和协商缓存:
- 强缓存:浏览器直接从本地缓存中获取数据,不与服务器进行交互。
- 协商缓存:浏览器发送请求到服务器,服务器判定是否可使用本地缓存。
两种缓存方式最终使用的都是本地缓存;前者无需与服务器交互,后者需要。
一、强制缓存
强制缓存是在浏览器加载资源的时候,先检查缓存时间是否过期,若未过期则直接从缓存中查找请求结果,如果缓存时间过期或不存在该缓存结果,则向服务端发起请求。
设置缓存时间的方法有两种(响应头字段):
- Expires(HTTP/1.0)
- Cache-Control(HTTP/1.1)
Expires
HTTP/1.0 中使用响应头部字段 Expires 来设置缓存过期时间。客户端第一次请求时,服务端会在响应头部添加 Expires 字段。当浏览器再次发送请求时,先会对比当前时间和 Expires 对应的时间,如果当前时间早于 Expires 时间,那么直接使用缓存;反之,需要再次发送请求。
上述 Expires 信息告诉浏览器:在 2020.10.10 日之前,可以直接使用该请求的缓存。
问题:
- 服务端和浏览器的时间可能不同,导致缓存过期时间出现偏差
- 客户端可以通过修改系统时间来继续使用缓存或提前使缓存失效
为了解决这个问题,HTTP/1.1 提出了 Cache-Control 响应头部字段。
Cache-Control
它的常用值有下面几个:
no-cache:表示使用协商缓存,即每次使用缓存前必须向服务端确认缓存资源是否更新;
no-store:禁止浏览器以及所有中间缓存存储响应内容;
public:公有缓存,表示可以被代理服务器缓存,可以被多个用户共享;
private:私有缓存,不能被代理服务器缓存,不可以被多个用户共享;
max-age:以秒为单位的数值,表示缓存的有效时间;
must-revalidate:当缓存过期时,需要去服务端校验缓存的有效性。
此 Cache-Control 信息告诉浏览器该缓存为公有缓存,有效期 1 年。
强制缓存中,cache-control 的 max-age 优先级高于 Expires
200 状态码一定是服务器返回的吗?
不是。命中强缓存的话,会直接从内存或者磁盘中读取资源,并返回一个200状态码,具体操作可以试试浏览器的前进后退键。
二、协商缓存
协商缓存不指定缓存的有效时间,而是在请求时直接发送资源标识到服务端确认缓存是否需要更新,如果请求响应返回的 HTTP 状态为 304,则表示缓存仍然有效;否则返回状态码 200 、最新的资源和最新的资源标识。
控制缓存的难题就从浏览器端转移到了服务端。
资源标识(在 Response Header 中)有两种:
- Last-Modified:资源的最后修改时间
- Etag:资源的唯一标识(一个字符串)
Last-Modified 和 If-Modified-Since:
服务端通过响应头部字段 Last-Modified 和请求头部字段 If-Modified-Since 比对双方资源的修改时间,来确定缓存是否需要更新。具体工作流程如下:
- 浏览器第一次请求资源,服务端在返回资源的响应头中加入 Last-Modified 字段,表示这个资源在服务端上的最近修改时间;
- 当浏览器再次向服务端请求该资源时,请求头部带上之前服务端返回的 Last-Modified,这个请求头叫 If-Modified-Since;
- 服务端再次收到请求,根据 If-Modified-Since 的值,判断相关资源是否有变化,如果没有,则返回 304 Not Modified,浏览器使用资源缓存值;否则返回资源内容,且更新 Last-Modified 响应头内容。
这种方式虽然能判断缓存是否失效,但也存在三个问题:
- 精度问题:Last-Modified 的时间精度为秒,如果在 1 秒内发生修改,那么缓存判断会失效
- 准度问题:如果一个文件被修改后又被还原,内容没有发生变化,却仍然需要重新请求
- 服务器问题:某些服务器不能精确的得到文件的最后修改时间
因此我们需要 ETag
ETag 和 If-None-Match
为了解决精度问题和准度问题,HTTP 提供了另一种依赖于文件哈希值的精确判断缓存的方式:响应头部字段 ETag 和请求头部字段 If-None-Match。具体工作流程如下:
- 浏览器第一次请求资源,服务端在返响应头中加入 Etag 字段,Etag 字段值为该资源的哈希值;
- 当浏览器再次跟服务端请求这个资源时,在请求头上加上 If-None-Match,值为之前响应头部字段 ETag 的值;
- 服务端再次收到请求,将请求头 If-None-Match 字段的值和响应资源的哈希值进行比对,如果两个值相同,则说明资源没有变化,返回 304 Not Modified;否则就正常返回资源内容,无论是否发生变化,都会将计算出的哈希值放入响应头部的 ETag 字段中。
这种缓存比较的方式也会存在一些问题,具体表现在以下两个方面:
- 计算成本。对于大文件而言,读取完整的文件内容生成哈希值开销较大;只读取文件部分内容,又容易判断出错。
- 计算误差。不同服务端可能会采用不同的哈希值计算方式。所以同一个资源在两台服务端产生的 Etag 可能是不相同的。对于使用服务器集群来处理请求的网站来说,使用 Etag 的缓存命中率会有所降低。
两者中会优先使用 Etag:
- Last-Modified 只能精确到秒级
- 如果资源被重复生成,而内容不变,Etag 更加精准
响应头示例:
总结
缓存的优先级:
- 强制缓存的优先级高于协商缓存:
- 强制缓存中:cache-control 的 max-age 优先级高于 Expires
- 协商缓存中:Etag 优先级比 Last-Modified 高。
用户行为
禁用缓存
服务器禁用缓存:
- Cache-Control: max-age=0, must-revalidate
- Cache-Control: no-cache
- Cache-Control: no-store
浏览器禁用缓存:
- 改变 url,加上
?xi=xixi
- 设置请求 header
总结
缓存是解决性能问题的重要手段,使用缓存的好处很多,除了能让浏览器更快地加载网络资源之外,还会带来其他好处,比如节省网络流量和带宽,以及减少服务端的负担。