JS前端面试常见浏览器缓存：强缓存及协商缓存的方法

在前端开发中，浏览器缓存是优化网页性能的重要手段之一。合理利用缓存可以减少网络请求，提升页面加载速度，降低服务器压力。浏览器缓存主要分为强缓存和协商缓存两种机制。本文将详细介绍这两种缓存机制的原理及实现方法。

1. 浏览器缓存的基本概念

浏览器缓存是指浏览器将请求过的资源（如HTML、CSS、JS、图片等）存储在本地磁盘或内存中，当用户再次访问相同资源时，可以直接从本地加载，而无需重新向服务器请求。

缓存机制的核心目标是： - 减少网络请求，提升页面加载速度。 - 降低服务器负载，节省带宽资源。

2. 强缓存

强缓存是指浏览器在请求资源时，直接从本地缓存中加载资源，而不向服务器发送请求。强缓存的实现主要依赖于HTTP响应头中的Cache-Control和Expires字段。

2.1 Cache-Control

Cache-Control是HTTP/1.1中用于控制缓存行为的头部字段，常见的值包括： - max-age=<seconds>：指定资源的最大缓存时间（单位：秒）。 - no-cache：强制使用协商缓存，每次请求都需要向服务器验证资源是否过期。 - no-store：禁止缓存，每次请求都从服务器获取资源。 - public：资源可以被所有用户缓存（包括代理服务器）。 - private：资源只能被客户端缓存。

示例：

Cache-Control: max-age=3600, public

表示资源可以被缓存1小时，且可以被所有用户缓存。

2.2 Expires

Expires是HTTP/1.0中用于指定资源过期时间的头部字段，其值为一个具体的日期时间。如果当前时间早于Expires指定的时间，则使用缓存；否则，向服务器请求新资源。

示例：

Expires: Wed, 21 Oct 2023 07:28:00 GMT

表示资源在2023年10月21日07:28:00之前有效。

2.3 强缓存的优先级

• 如果同时设置了Cache-Control和Expires，Cache-Control的优先级更高。
• 如果Cache-Control的值为no-cache或no-store，则忽略Expires。

3. 协商缓存

协商缓存是指浏览器在请求资源时，向服务器发送请求验证资源是否过期。如果资源未过期，服务器返回304 Not Modified状态码，浏览器从缓存中加载资源；否则，服务器返回新资源。

协商缓存的实现主要依赖于HTTP请求头中的If-Modified-Since和If-None-Match字段，以及响应头中的Last-Modified和ETag字段。

3.1 Last-Modified 和 If-Modified-Since

• Last-Modified是服务器返回的响应头，表示资源的最后修改时间。
• If-Modified-Since是浏览器发送的请求头，其值为上一次请求时服务器返回的Last-Modified值。

示例：

Last-Modified: Wed, 21 Oct 2023 07:28:00 GMT
If-Modified-Since: Wed, 21 Oct 2023 07:28:00 GMT

如果资源的最后修改时间晚于If-Modified-Since指定的时间，服务器返回新资源；否则，返回304 Not Modified。

3.2 ETag 和 If-None-Match

• ETag是服务器返回的响应头，表示资源的唯一标识符（通常为哈希值）。
• If-None-Match是浏览器发送的请求头，其值为上一次请求时服务器返回的ETag值。

示例：

ETag: "123456789"
If-None-Match: "123456789"

如果资源的ETag值与If-None-Match不一致，服务器返回新资源；否则，返回304 Not Modified。

3.3 协商缓存的优先级

• 如果同时设置了ETag和Last-Modified，ETag的优先级更高。
• 如果服务器返回304 Not Modified，浏览器从缓存中加载资源。

4. 强缓存与协商缓存的区别

5. 实际应用中的缓存策略

在实际开发中，通常结合强缓存和协商缓存来优化性能： 1. 静态资源（如CSS、JS、图片）： - 设置较长的强缓存时间（如max-age=31536000）。 - 使用文件哈希值作为文件名（如app.123456.js），确保资源更新后文件名变化，强制浏览器加载新资源。 2. 动态资源（如HTML、API数据）： - 设置较短的强缓存时间或禁用强缓存（如no-cache）。 - 使用协商缓存验证资源是否过期。

6. 总结

浏览器缓存是前端性能优化的重要手段，合理使用强缓存和协商缓存可以显著提升用户体验。在实际开发中，应根据资源类型和更新频率选择合适的缓存策略，同时注意缓存的优先级和兼容性问题。掌握这些知识，不仅有助于应对前端面试，也能在实际项目中发挥重要作用。