一步步剖析浏览器缓存

ゞ浴缸里的玫瑰 2023-06-22 03:30 10阅读 0赞

# 一、 缓存 #

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

# 二、缓存分类 #

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

缓存从微观上可以分为:

1. 浏览器缓存；

2. 代理服务器缓存；

3. CDN缓存；

4. 数据库缓存；

5. 应用层缓存；

# 三、缓存的作用: #

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

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

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

# 四、缓存详细分类: #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvcmluZ3JheQ_size_16_color_FFFFFF_t_70][]

浏览器的缓存：

## （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 是最重要的规则， 主要用于控制网页缓存， 主要取值为:

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

强缓存的流程:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvcmluZ3JheQ_size_16_color_FFFFFF_t_70 1][]

**           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 是服务器响应请求时，返回该资源文件在服务器最后被修改的时间；

文字介绍整个流程：

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

协商缓存的流程:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvcmluZ3JheQ_size_16_color_FFFFFF_t_70 2][]

##      2）、本地存储 ##

1、 localStorage；

2、 sessionStorage；

3、 cookie

4、 IndexDB（数据库缓存）

IndexDB 就是 浏览器提供的本地数据库，它可以被网页脚本创建和操作。IndexDB 允许存储大量数据 ，提供查找接口，还能建立索引。这些都是LocalStorage 所不具备的， 就数据库类型而言，IndexDB 不属于关系型数据库（不支持SQL 查询语句），更接近NoSQL 数据库。

5、appCache（应用层缓存）...

##       3）、代理服务器缓存； ##

## 五、缓存机制: ##

强制缓存优先于协商缓存进行， 若强制缓存（Expires）和 Cache-Control） 生效则直接使用缓存，若不生效则进行协商缓存（Last-Modified / If-Modified-Since 和 Etag / If-None-Match），

协商缓存由服务器决定是否使用缓存，若协商缓存失效，那么代表请求的缓存失效，返回200， 重新返回资源和缓存标识， 再存入浏览器缓存中； 生效则返回304， 继续使用缓存。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvcmluZ3JheQ_size_16_color_FFFFFF_t_70 3][]

## 六、用户行为对浏览器缓存的影响: ##

（1）、打开网页，输入网址： 查找disk cache 中是否有匹配，如有则使用； 如没有则发送网络请求；此时所有的缓存都生效。

（2）、普通刷新（F5）： 因为TAB并没有关闭，因此memory cache是 可用的，会被优先使用（如果匹配的话），其次才是disk cache； 浏览器绕过本地缓存来发送请求到服务器，此时，协商缓存是有效的。

（3）、强制刷新（Ctrl + F5）： 浏览器不使用缓存， 因此发送的请求头部均带有Cache-control: no-cache(为了兼任，还带了Pragma：no-cache）， 服务器直接返回200 和 最新内容； 浏览器将绕过本地缓存和协商缓存， 直接让服务器返回最新的资源。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvcmluZ3JheQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191214175155510.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvcmluZ3JheQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvcmluZ3JheQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191214175502152.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvcmluZ3JheQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvcmluZ3JheQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191214175749721.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvcmluZ3JheQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvcmluZ3JheQ_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191214175823566.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvcmluZ3JheQ==,size_16,color_FFFFFF,t_70