浏览器缓存(Browser Cache)篇

2025-08-04 20:37:26

1. 缓存的目的

如果网络进程在发送请求之前,发现本地有有效的缓存的文件和要请求的 URL 地址所匹配,那么就不需要发起后续的请求了。所以缓存的目的是减少网络请求,减少服务器的压力,提高页面加载的速度,提高网络的性能。特别是对于一些静态资源,不经常改动,那就一次请求,然后缓存下来,直到这个资源有改动,我们再去服务端拉去新的资源。

缓存的好处:

减少请求次数,缓解服务器压力提升性能,增强用户体验,使用本地资源肯定会比请求服务器更快减少带宽消耗,当我们使用缓存时,只会产生很小的网络消耗。

2. 前端缓存有几种方式?

HTTP缓存web Storage【LocalStorage/SessionStorage】Service Workers 【可以缓存资源的请求,参考】IndexedDB 【这个相当于浏览器中的数据库,请看官网】Cache API 【这个我没用过,可以看官网,是实验性技术】

3. 浏览器缓存

浏览器缓存大部分都是后端开发设置的,前端开发设置的不多,前端面试总是讲这个问题,是考验一下前端开发对浏览器原理的理解

浏览器缓存是设置在ajax请求头的浏览器缓存分为两个 ;

强缓存:协商缓存两者的主要区别是使用本地缓存的时候,是否需要向服务器验证本地缓存是否依旧有效。顾名思义,协商缓存,就是需要和服务器进行协商,最终确定是否使用本地缓存。

4. 强缓存是如何实现的呢?

强缓存是通过设置HTTP响应头来实现的。主要有两种方式来设置强缓存:

Expires :服务器在响应头中设置一个过期时间,表示资源的有效期。浏览器在下一次请求该资源时,会先比较当前时间与资源的过期时间,如果未过期,则直接使用缓存副本。但是这种方式存在一个问题,比如服务器与客户端时间不一致可能导致缓存失效。为了解决这个问题就有了Cache-Control。Cache-Control :通过设置Cache-Control响应头来控制缓存行为。常见的取值有:

max-age= :指定资源的最大缓存时间,以秒为单位。例如,Cache-Control: max-age=3600 表示资源将在 3600 秒(1小时)后过期。浏览器在该时间内直接使用缓存,而不发送请求到服务器。no-cache :要求客户端每次请求都要发送验证请求到服务器,以确认缓存的副本是否仍然有效。即使客户端有缓存副本,也必须进行重新验证。no-store :指示客户端不应将响应存储在任何缓存中,包括临时缓存。每次请求都需要重新从服务器获取资源。public :表示响应可以被任何缓存(包括公共缓存和私有缓存)缓存。private :指示响应只能被私有缓存缓存,不允许被共享缓存(如 CDN)缓存。must-revalidate :要求客户端在缓存过期之前必须重新验证资源的有效性,如果资源无效,则需要从服务器重新获取。proxy-revalidate :类似于 must-revalidate,但仅适用于共享缓存(如 CDN)。

5. 强缓存的过程

浏览器第一次请求,没有强缓存

用户发起请求 :用户在浏览器中输入网址或点击链接,触发请求发送给服务器。检查强缓存 :浏览器首先检查缓存中是否存在所请求资源的副本,并且该副本是否仍然有效(未过期)。检查过程是根据请求的URL和响应头中的缓存相关字段进行匹配。缓存未命中 :如果缓存中不存在有效的副本,或者副本已过期(根据响应头中的过期时间或其他缓存控制字段),浏览器需要向服务器发送请求获取最新的资源。服务器响应 :服务器接收到请求后,会根据请求的URL和其他相关信息来生成响应。响应中包含了所请求资源的内容以及与缓存相关的响应头字段更新缓存 :浏览器从服务器获取到最新的资源后,会将资源存储在缓存中,以备将来使用。缓存中的副本会根据响应头中的缓存相关字段(如Cache-Control、Expires)进行更新和管理。

浏览器有强缓存,且未过期

用户发起请求 :用户在浏览器中输入网址或点击链接,触发请求发送给服务器。检查强缓存 :浏览器首先检查缓存中是否存在所请求资源的副本,并且该副本是否仍然有效(未过期)。检查过程是根据请求的URL和响应头中的缓存相关字段进行匹配。缓存命中 :如果缓存中存在有效的副本,浏览器直接从缓存中获取资源,无需向服务器发送请求。这个过程称为缓存命中,可以大大加快网页加载速度。返回缓存副本 :浏览器从缓存中获取到资源后,将其返回给用户,并显示网页内容或执行相应的操作。

6. 什么是协商缓存?

协商缓存是指浏览器在请求资源时,浏览器和服务器之间协商确定是否使用缓存副本的形式。

如果资源的强缓存失效(即过期),浏览器将向服务器发送请求,并在请求中携带上次缓存的相关信息。服务器收到请求后,会根据携带的信息来判断资源是否有更新。如果资源没有更新,则服务器返回一个空的响应,并在响应头中设置状态码为304(Not Modified),告诉浏览器可以使用本地缓存。如果资源有更新,服务器将返回新的资源,并在响应头中设置相关的缓存信息。

7. 协商缓存如何实现的?

协商缓存是通过设置HTTP响应头来实现的。主要有两种方式来设置强缓存:

Last-Modified 和 If-Modified-Since :服务器在响应头中使用 Last-Modified 字段来指示资源的最后修改时间。当客户端发送请求时,在请求头中使用 。If-Modified-Since 字段将上次获取资源时服务器返回的 Last-Modified 时间戳发送回服务器。服务器接收到请求后,会比较资源的修改时间与 If-Modified-Since 字段的值相比较。如果资源未被修改,则返回状态码 304 Not Modified,客户端可以使用缓存副本。否则,返回最新的资源和状态码 200 OK。ETag 和 If-None-Match :服务器在响应头中使用 ETag 字段来指示资源的标识符,通常是一个唯一的字符串。当客户端发送请求时,在请求头中使用 If-None-Match 字段将上次获取资源时服务器返回的 ETag 值发送回服务器。服务器接收到请求后,会比较资源的标识符与 If-None-Match 字段的值。如果标识符相同,则返回状态码 304 Not Modified,客户端可以使用缓存副本。否则,返回最新的资源和状态码 200 OK。

Last-Modified :指示资源的最后修改时间。If-Modified-Since :在后续请求中,浏览器通过该字段将上次的Last-Modified值发送给服务器。ETag(实体标签) :是一个资源的唯一标识符,可以是资源的哈希值、版本号等。If-None-Match :在后续请求中,浏览器通过该字段将上次的ETag值发送给服务器。

8. 总结浏览器缓存执行的过程

在浏览器缓存机制中,强制缓存优先于协商缓存进行处理。

当强制缓存生效时,浏览器会直接使用缓存的资源,而不向服务器发送请求。强制缓存可以通过Expires和Cache-Control头字段来设置。

当强制缓存不生效,浏览器将进行协商缓存。协商缓存通过使用Last-Modified / If-Modified-Since和Etag / If-None-Match头字段来与服务器进行通信,判断资源是否仍然有效。服务器会根据这些字段的值来决定是否使用缓存。

如果协商缓存生效,服务器将返回304状态码,表示资源未发生变化,浏览器将继续使用缓存的资源,而无需重新下载。

如果协商缓存失效,表示请求的缓存已过期或无效,浏览器将重新向服务器发送请求获取最新的资源,并将结果存入缓存中供下次使用。

待续 。。。