前端面试必备 | 浏览器缓存篇(P1-10)

文章目录

1. 什么是浏览器缓存？它在前端开发中的作用是什么？
2. 解释一下浏览器缓存中的强缓存和协商缓存的概念及其区别。
3. HTTP响应头中的Cache-Control和Expires分别用于设置什么类型的缓存策略？
4. 什么是ETag？它在浏览器缓存中的作用是什么？
5. 解释一下缓存验证的过程是如何进行的（即协商缓存的机制）？
6. 如果要禁用浏览器缓存，你会采取什么措施？
7. 如何在前端代码中设置缓存策略，以便利用浏览器缓存？
8. 解释一下缓存清除（缓存刷新）的几种方法和情况。
9. 什么是缓存穿透？如何在前端防止缓存穿透的问题？
10. 解释一下前端开发中常见的缓存失效场景及其解决方案。

1. 什么是浏览器缓存？它在前端开发中的作用是什么？

浏览器缓存是指浏览器在访问网页时将一些数据（如HTML、CSS、JavaScript文件、图像等）存储在客户端本地的临时存储空间中。这样，在用户再次访问同一个页面时，浏览器可以直接从缓存中加载这些数据，而无需重新从服务器下载。

浏览器缓存在前端开发中起到了几个重要的作用：

1. 提升性能和加快加载速度：通过使用缓存，浏览器避免了重复下载相同的资源文件，减少了服务器的负担和网络传输时间，从而加快了页面加载速度。

2. 减少网络流量和节省带宽：如果网页的资源文件已经存在于浏览器缓存中，并且没有过期，那么浏览器可以直接从缓存中获取资源，而无需再次向服务器请求，从而减少了网络流量和带宽的消耗。

3. 离线访问支持：浏览器缓存还可以使网页在离线状态下继续访问，如果用户已经访问过某个页面并缓存了相应的资源，当用户离线时，浏览器可以从缓存中加载并显示页面内容。

在前端开发中，开发者可以利用浏览器缓存来优化网页性能和用户体验。通过正确地设置缓存策略，开发者可以控制文件的缓存时间、缓存级别以及是否允许缓存等，从而实现更好的资源管理和更新策略。同时，开发者还可以使用版本控制或文件指纹等技术来确保更新的文件可以被浏览器正确地识别和获取，避免缓存旧的文件造成的问题。总之，合理利用浏览器缓存可以显著提升网页加载速度和性能，提升用户体验。

2. 解释一下浏览器缓存中的强缓存和协商缓存的概念及其区别。

在浏览器缓存中，可以通过两种方式来控制缓存的行为：强缓存和协商缓存。

1. 强缓存（Cache-Control 和 Expires）：强缓存是通过在服务器响应头中设置相关的缓存策略信息，使浏览器在接收到响应后直接从缓存中获取资源，而无需与服务器进行通信。

   • Cache-Control：该响应头字段指定了资源的缓存策略。常见的值包括：

     • max-age=<seconds>：指定资源在缓存中的有效时间，单位为秒。例如，max-age=3600表示资源在缓存中有效一小时。
     • no-cache：表示每次请求都要与服务器进行验证，不能直接使用缓存。
     • no-store：表示不缓存任何请求或响应的内容。

   • Expires：该响应头字段指定了资源的过期时间，是一个具体的日期时间。当浏览器接收到带有 Expires 响应头的资源时，会将资源缓存在本地，并在过期时间之前直接使用缓存。

强缓存优先级高于协商缓存，当强缓存生效时，直接使用缓存，不会发送请求到服务器。

2. 协商缓存（Last-Modified 和 ETag）：协商缓存是在浏览器发送请求时与服务器进行通信，通过比较资源的标识符来确定是否使用缓存。

   • Last-Modified 和 If-Modified-Since：服务器在响应头中返回资源的最后修改时间（Last-Modified），浏览器在后续请求中通过 If-Modified-Since 头字段将上次请求返回的最后修改时间发送给服务器。如果资源在此时间后没有发生变化，服务器会返回 304 Not Modified 状态码，告诉浏览器可以使用缓存。

   • ETag 和 If-None-Match：服务器在响应头中返回资源的唯一标识符（ETag），浏览器在后续请求中通过 If-None-Match 头字段将上次请求返回的 ETag 发送给服务器。如果资源的 ETag 与服务器上的匹配，服务器会返回 304 Not Modified 状态码。

   协商缓存是根据服务器与浏览器之间的通信来确定是否使用缓存。如果协商缓存生效，服务器会返回很小的响应结果，节省了带宽的使用。

区别：

• 强缓存是通过在服务器响应头中设置缓存策略信息，浏览器在接收到响应后直接从缓存中获取资源。而协商缓存是在请求时与服务器通信，由服务器返回状态码来决定是否使用缓存。
• 强缓存的优先级比协商缓存高，如果强缓存生效，浏览器不会发送请求到服务器。而协商缓存需要发送请求到服务器进行验证。
• 强缓存使用 Cache-Control 和 Expires 头字段进行控制，而协商缓存使用 Last-Modified 和 ETag 头字段进行验证。
• 强缓存适用于静态资源，而协商缓存适用于需要频繁变动的资源。

通常情况下，开发者可以结合使用强缓存和协商缓存策略，以最大程度地提高缓存的效果和性能。

3. HTTP响应头中的Cache-Control和Expires分别用于设置什么类型的缓存策略？

Cache-Control 和 Expires 是用于设置强缓存的缓存策略。

1. Cache-Control：Cache-Control 是一个用于指定缓存行为的响应头字段。它可以通过设置不同的指令来控制缓存的行为。

   • max-age=：指定资源在缓存中的最大有效时间，单位为秒。例如，Cache-Control: max-age=3600 表示资源在缓存中有效一小时。
   • no-cache：表示每次请求都要与服务器进行验证，不能直接使用缓存。
   • no-store：表示不缓存任何请求或响应的内容。
   • public：表示响应可以被任何缓存（包括客户端和中间代理服务器）缓存。
   • private：表示响应只能被客户端缓存，中间代理服务器不应该缓存响应。

这些指令可以单独使用或者组合使用，以定义缓存的行为。通过 Cache-Control，开发者可以灵活地控制缓存的有效期、缓存级别和缓存的访问权限。

2. Expires：Expires 是一个响应头字段，用于指定资源的过期时间，是一个具体的日期时间。浏览器在接收到带有 Expires 响应头的资源时，会将资源缓存在本地，并在过期时间之前直接使用缓存。

   例如，Expires: Wed, 21 Oct 2023 07:28:00 GMT 表示资源在 2023 年 10 月 21 日 07:28:00 GMT 之前有效。

Cache-Control 是 HTTP/1.1 的标准字段，而 Expires 是 HTTP/1.0 的字段。Cache-Control 提供了更多的缓存控制选项，更为灵活，并且在功能上覆盖了 Expires 的功能。因此，在支持 HTTP/1.1 的情况下，建议优先使用 Cache-Control 来设置缓存策略。

同时，需要注意的是，如果同时使用了 Cache-Control 和 Expires，Cache-Control 的优先级更高。因为 Cache-Control 是比 Expires 更新的规范，并且提供了更多的缓存控制选项。

4. 什么是ETag？它在浏览器缓存中的作用是什么？

ETag（Entity Tag）是一个由服务器生成的用于标识资源的唯一标识符。

ETag 在浏览器缓存中的作用是协商缓存的一部分。当浏览器发送请求时，会将上一次请求返回的 ETag 值通过 If-None-Match 请求头字段发送给服务器。服务器使用这个值与当前资源的 ETag 进行比较，以判断资源是否发生了变化。

如果服务器发现资源的 ETag 值与浏览器发送的匹配，并且资源没有发生变化，服务器会返回状态码 304 Not Modified，表示资源未修改。浏览器收到这个响应后，可以直接从缓存中获取资源，而无需重新下载。

ETag 能够精确地确定资源是否发生了变化，相对于 Last-Modified（最后修改时间）来说更加准确。如果资源的内容发生了任何改变，服务器会为该资源生成新的 ETag 值，而 Last-Modified 只能以秒级别的精度表示时间，可能无法捕捉到非常小的修改。

在大多数情况下，浏览器会使用 Cache-Control 和 ETag（或 Last-Modified）一起使用，以提供更精确和可靠的缓存控制。当 Cache-Control 的缓存过期策略失效时，浏览器会使用 ETag 和服务器进行协商，以便确定是否可以使用缓存的副本。如果服务器返回 304 Not Modified，浏览器就可以直接使用缓存，并避免重新下载资源。这样可以减少网络带宽的使用，并提高页面加载速度和性能。

5. 解释一下缓存验证的过程是