浏览器缓存机制-CSDN博客

本文链接：https://blog.csdn.net/weixin_38099964/article/details/113764244

本文详细介绍了浏览器缓存的位置，包括Service Worker、Memory Cache、Disk Cache和Push Cache，并阐述了强缓存（Expires和Cache-Control）与协商缓存（Last-Modified、If-Modified-Since和ETag、If-None-Match）的工作原理，强调了Cache-Control的优先级和Etag的精确度优势。

摘要由CSDN通过智能技术生成

浏览器缓存机制

缓存位置
强缓存
协商缓存
思维导图

使用浏览器的缓存是性能优化中简单高效的一种优化方式，合理的浏览器缓存策略可以减少浏览器的相应和减少向后端发送请求。

缓存位置

Service Worker

Service Worker 是一个可以用来实现缓存功能的独立线程。Service Worker使用拦截请求的方式查询是否存在缓存，存在缓存的话就可以直接读取缓存文件，否则就去请求数据。因为 Service Worker 中涉及到请求拦截，传输协议必须为 HTTPS。

Memory Cache

Memory Cache 是内存中的缓存，主要是当前页面中已经获取到的资源。cache是高速缓存器，具有高速缓存器的特点，如高效，持续时间短，容量小。

内存缓存中有一块重要的缓存资源是preloader相关指令下载的资源，preloader的相关指令是页面优化的常见手段之一，它可以一边解析js/css文件，一边网络请求下一个资源。

Disk Cache

Disk Cache 是硬盘中的缓存，具有硬盘存储的特点，如读取速度慢，容量大，时效性高，因此大部分的缓存都来自 Disk Cache。

Push Cache

Push Cache是推送缓存，当以上三种缓存都没有命中时，它才会被使用。Push Cache只在会话（Session）中存在，并且缓存时间也很短暂，在Chrome浏览器中只有5分钟左右，同时它也并非严格执行HTTP头中的缓存指令。

如果以上四种缓存都没有命中的话，那么只能发起请求来获取资源了。

为了性能上的考虑，大部分的接口都应该选择好缓存策略，通常浏览器缓存策略分为两种：强缓存和协商缓存，并且缓存策略都是通过设置 HTTP Header 来实现的。

强缓存

强缓存：不会向服务器发送请求，直接从缓存中读取资源，在chrome控制台的Network选项中可以看到该请求返回200的状态码，并且Size显示from disk cache或from memory cache。强缓存可以通过设置两种 HTTP Header 实现：Expires 和 Cache-Control。

Expires

Expires 是缓存过期时间，用来指定资源到期的时间，会根据电脑的本地时间进行过期时间判断,如果修改了本地时间，可能会造成缓存失效。Expires 需要和Last-modified结合使用。

Cache-Control

public:所有内容都将被缓存（客户端和代理服务器都可缓存）
private:所有内容只有客户端可以缓存。
no-cache:资源被缓存，但是立即失效，下次会发请求验证资源是否过期。
no-store:不缓存任何响应
max-age:缓存多久后过期
s-maxage:同max-age作用一样，只在代理服务器中生效（比如CDN缓存）
max-stale:能够容忍的最大过期时间。max-stale指令标示了客户端愿意接收一个已经过期了的响应。如果指定了max-stale的值，则最大容忍时间为对应的秒数。如果没有指定，那么说明浏览器愿意接收任何时间的响应。
min-fresh:能够容忍的最小新鲜度。min-fresh标示了客户端不愿意接受新鲜度不多于当前的age加上min-fresh设定的时间之和的响应。

Expires和Cache-Control对比

两者同时存在的话，Cache-Control优先级高于Expires。

协商缓存

协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程，主要有以下两种情况：

Last-Modified和If-Modified-Since

1、浏览器在第一次访问资源时，服务器返回资源的同时，在response header中添加 Last-Modified的header，这是这个资源在服务器上的最后修改时间，浏览器接收后缓存文件和header；
2、浏览器下一次请求这个资源时，会首先检测header中是否有 Last-Modified，如果有就在header中添加If-Modified-Since，值就是Last-Modified中的值；服务器收到这个资源请求，会根据 If-Modified-Since 中的值与服务器中这个资源的最后修改时间对比，如果没有变化，返回304和空的响应体，直接从缓存读取，如果If-Modified-Since的时间小于服务器中这个资源的最后修改时间，说明文件有更新，于是返回新的资源文件和200

ETag和If-None-Match

Etag是服务器响应请求时，返回当前资源文件的一个唯一标识，只要资源有变化，Etag就会重新生成。浏览器在下一次加载资源向服务器发送请求时，会将上一次返回的Etag值放到request header里的If-None-Match里，服务器只需要比较客户端传来的If-None-Match跟自己服务器上该资源的ETag是否一致，就能很好地判断资源相对客户端而言是否被修改过了。如果服务器发现ETag匹配不上，那么直接以常规GET 200回包形式将新的资源发给客户端；如果ETag是一致的，则直接返回304知会客户端直接使用本地缓存即可。