在前端开发中，浏览器缓存是优化网页性能的重要手段之一。合理利用缓存可以减少网络请求，提升页面加载速度，降低服务器压力。浏览器缓存主要分为强缓存和协商缓存两种机制。本文将详细介绍这两种缓存机制的原理及实现方法。
浏览器缓存是指浏览器将请求过的资源（如HTML、CSS、JS、图片等）存储在本地磁盘或内存中，当用户再次访问相同资源时，可以直接从本地加载，而无需重新向服务器请求。
缓存机制的核心目标是： - 减少网络请求，提升页面加载速度。 - 降低服务器负载，节省带宽资源。
强缓存是指浏览器在请求资源时，直接从本地缓存中加载资源，而不向服务器发送请求。强缓存的实现主要依赖于HTTP响应头中的Cache-Control和Expires字段。
Cache-Control是HTTP/1.1中用于控制缓存行为的头部字段，常见的值包括：
- max-age=<seconds>：指定资源的最大缓存时间（单位：秒）。
- no-cache：强制使用协商缓存，每次请求都需要向服务器验证资源是否过期。
- no-store：禁止缓存，每次请求都从服务器获取资源。
- public：资源可以被所有用户缓存（包括代理服务器）。
- private：资源只能被客户端缓存。
示例：
Cache-Control: max-age=3600, public
表示资源可以被缓存1小时，且可以被所有用户缓存。
Expires是HTTP/1.0中用于指定资源过期时间的头部字段，其值为一个具体的日期时间。如果当前时间早于Expires指定的时间，则使用缓存；否则，向服务器请求新资源。
示例：
Expires: Wed, 21 Oct 2023 07:28:00 GMT
表示资源在2023年10月21日07:28:00之前有效。
Cache-Control和Expires，Cache-Control的优先级更高。Cache-Control的值为no-cache或no-store，则忽略Expires。协商缓存是指浏览器在请求资源时，向服务器发送请求验证资源是否过期。如果资源未过期，服务器返回304 Not Modified状态码，浏览器从缓存中加载资源；否则，服务器返回新资源。
协商缓存的实现主要依赖于HTTP请求头中的If-Modified-Since和If-None-Match字段，以及响应头中的Last-Modified和ETag字段。
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。
ETag是服务器返回的响应头，表示资源的唯一标识符（通常为哈希值）。If-None-Match是浏览器发送的请求头，其值为上一次请求时服务器返回的ETag值。示例：
ETag: "123456789"
If-None-Match: "123456789"
如果资源的ETag值与If-None-Match不一致，服务器返回新资源；否则，返回304 Not Modified。
ETag和Last-Modified，ETag的优先级更高。304 Not Modified，浏览器从缓存中加载资源。| 特性 | 强缓存 | 协商缓存 |
|---|---|---|
| 请求是否发送 | 不发送请求，直接使用缓存 | 发送请求，验证资源是否过期 |
| 响应状态码 | 200 (from cache) | 304 (Not Modified) |
| 实现方式 | Cache-Control、Expires |
Last-Modified、ETag |
| 优先级 | 优先使用强缓存 | 强缓存失效后使用协商缓存 |
在实际开发中，通常结合强缓存和协商缓存来优化性能：
1. 静态资源（如CSS、JS、图片）：
- 设置较长的强缓存时间（如max-age=31536000）。
- 使用文件哈希值作为文件名（如app.123456.js），确保资源更新后文件名变化，强制浏览器加载新资源。
2. 动态资源（如HTML、API数据）：
- 设置较短的强缓存时间或禁用强缓存（如no-cache）。
- 使用协商缓存验证资源是否过期。
浏览器缓存是前端性能优化的重要手段，合理使用强缓存和协商缓存可以显著提升用户体验。在实际开发中，应根据资源类型和更新频率选择合适的缓存策略，同时注意缓存的优先级和兼容性问题。掌握这些知识，不仅有助于应对前端面试，也能在实际项目中发挥重要作用。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
