一步步剖析浏览器缓存

最新推荐文章于 2023-08-02 14:50:12 发布

loringray

最新推荐文章于 2023-08-02 14:50:12 发布

阅读量370

点赞数

分类专栏：前端文章标签：缓存

本文链接：https://blog.youkuaiyun.com/loringray/article/details/103532173

版权

前端专栏收录该内容

27 篇文章

订阅专栏

本文详细介绍了浏览器缓存的工作原理，包括缓存分类、作用及详细分类。重点讲解了强缓存（HTTP 1.0的Expires与HTTP 1.1的Cache-Control）和协商缓存（Last-Modified/If-Modified-Since与Etag/If-None-Match）。此外，还提到了本地存储如localStorage、sessionStorage、cookie和IndexDB，以及用户行为如何影响浏览器缓存的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、缓存

缓存是浏览器的一种机制，可以把请求过的web 资源（html、 css、js、图片等），拷贝一份副本存储在浏览器中，并根据请求配置是否使用该副本。

二、缓存分类

缓存从宏观上分为私有缓存和共享缓存，共享缓存就是那些能被各级代理缓存的的缓存；私有缓存就是用户专享的，各级代理不能缓存的缓存。

缓存从微观上可以分为:

1. 浏览器缓存；

2. 代理服务器缓存；

3. CDN缓存；

4. 数据库缓存；

5. 应用层缓存；

三、缓存的作用:

（1）、减少网络带宽消耗；

（2）、减少网络延迟，使得页面加载更快，提高用户体验；

（3）、降低服务器的压力

四、缓存详细分类:

浏览器的缓存：

（1）、cdn缓存；

（2）、客户端缓存；

1) 、http缓存（根据是否需要想服务器发送资源请求，分为强缓存和协商缓存）

1、强缓存（不发任何请求直接从浏览器中获取数据）：

（1）、HTTP 1.0: Expires

（2）、HTTP 1.1: Cache-control

判断的过程: 请求再次发起 =》浏览器根据 expires 和 cache-control 判断目标资源是否命中“强缓存” =》若命中，直接从缓存中获取资源，不再与服务器发送通讯。

PS : 如果cache-control与expires同时存在，以cache-control为主，继续使用 expires 的目的就是向下兼容。

（ Expires已经被 Cache-Control 替代，原因在于 Expires 依赖于本地时间，它控制缓存的原理是使用客户端的时间与服务端返回的时间做对比，那么如果客户端与服务端的时间因为某些原因（例如时区不同；客户端和服务端有一方的时间不准确；用户修改了本地时间）发生误差，那么强制缓存则会直接失效。）

HTTP/1.1 中， Cache-Control 是最重要的规则，主要用于控制网页缓存，主要取值为:

public：所有内容都将被缓存，客户端和代理服务器都可缓存；
private：所有内容只有客户端可以缓存，Cache-Control 的默认取值； --
no-cache：客户端缓存内容，但是是否使用缓存则需要经过协商缓存来验证决定；
no-store：所有内容都不会被缓存，即不使用强制缓存，也不使用协商缓存；
max-age=xxx (xxx is numeric): 缓存内容将在xxx秒后失效；
must-revalidate：强制浏览器严格遵守你设置的cache 规则；
proxy-revalidate：强制proxy 严格遵守你设置的cache 规则；

强缓存的流程:

2、协商缓存（发请求确认是否更新，再决定是否返回304并从缓存中读取数据）： Last-Modified/ If-Modified-Since 和 Etag/If-None-Match

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

（1）、缓存生效，返回304 和 Not Modified

（2）、协商缓存失效，返回200 和请求结果

协商缓存可以通过设置两种HTTP Header 实现: Last-Modified 和 ETag。

=》 HTTP 1.0： Last-Modified && If-Modfied-Since

HTTP 1.1: Etag && If-None-Match

Last-Modified 与 If-Modified-Since

Last-Modified 是服务器响应请求时，返回该资源文件在服务器最后被修改的时间；

文字介绍整个流程：

首次请求
服务器告知启用协商缓存规则，并在响应头带上Last-Modified，告知缓存到期时间；
随后的每次请求，请求头上都会携带If-Modified-Since，该值等于上一次响应头中的Last-Modified的值
服务器收到 If-Modified-Since 后，会将该属性的值与服务器上资源的最后修改时间进行匹配，从而判断资源是否发生了变化
如果发生变化会返回一个完整的响应内容，在响应头中添加新的 Last-Modified 值，否则，只返回 header 部分，状态码为304，响应头不会再添加 Last-Modified

协商缓存的流程: