浏览器缓存按照请求的优先级顺序包括以下四个阶段：Mermory Cache、Service Worker Cache、HTTP Cache、Push Cache。其中最常用的是HTTP Cache。

HTTP Cache

HTTP Cache 又可以称为 Disk Cache，因为缓存是存储在硬盘上的。HTTP 缓存又可以分为强制缓存和协商缓存。

强制缓存

强制缓存的意思就是，如果判定缓存有效，就不再请求服务器，而是直接读取本地硬盘缓存内容，因此不会发起网络请求，状态码显示为200。控制强制缓存的有以下两个头部字段:

Expire

Expire是 HTTP 1.0 时期的字段，表示资源过期时间。当用户当前时间早于Expire设置的时间，则不再请求服务器，否则请求。Expire有一个缺陷，就是用户设备时间不靠谱，可能被篡改。

Catche-Control

Catche-Control 是HTTP 1.1新增的字段，可配置性更强。包括以下属性：

max-age，表示有效期时长，单位为秒
public
private，控制转发服务器能否缓存
no-cache，跳过强制缓存
no-store，跳过强制缓存和协商缓存

协商缓存

Last-Modified/If-Modified-Since

Last-Modified 表示资源上次修改时间，当请求头If-Modified-Since中的值不等于资源当前值，则未命中，返回资源，状态码200；如果命中缓存，则响应体为空，状态码304；

Etag/If-None-Match

Etag 是指文件的一个标识，一般采用某种算法（如MD5）计算出一个唯一标识，当文件修改时，改唯一标识就会改变。第一次请求时，响应头中包含 Etag 响应头，后续再次请求该资源时，会携带 If-None-Match 请求头，服务器判断 If-None-Match 和文件当前 Etag 值是否相等，相等则命中缓存，返回 304；否则返回 200；

Etag 的优先级高于 Last-Modified

Mermory Cache

Mermory Cache 指存储在内存中的换粗，它的特点就是存储时间短、资源小。通常的场景是，网页中多次引用同一张图片，那么只会请求一次。当页面退出，缓存即失效。至于哪些资源会被缓存进内存，不同浏览器策略不同。

Service Worker Cache

Service Worker 是一个独立于主线程之外的一个独立线程，需要编写 JS 脚本去控制缓存哪些资源。Service Worker 缓存未命中，才会进行进入 HTTP 缓存的判断。

Push Cache

HTTP2 才有。得益于 HTTP2 的多路复用、服务端推送等特性。Push Cache 是会话级别的缓存，会话结束，缓存失效。

介绍一下浏览器缓存策略 #150

Description

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions