浏览器缓存机制是什么？

浏览器缓存是Web性能优化的核心策略之一。它的核心思想是将之前请求过的资源（如HTML、CSS、JavaScript、图片）存储在本地的磁盘或内存中。当用户再次访问相同资源时，浏览器可以优先从本地缓存读取，从而避免不必要的网络请求，极大提升加载速度并减少服务器压力。缓存行为主要由HTTP响应头和浏览器策略共同控制。

强缓存：无需询问服务器

强缓存是最高效的缓存阶段。浏览器在发起请求前，会先检查本地缓存。如果缓存未过期且有效，浏览器会直接使用缓存内容，完全不会向服务器发送请求。这通过两个HTTP响应头控制：Cache-Control和Expires。

HTTP/1.1 200 OK
Cache-Control: max-age=3600
Expires: Wed, 21 Oct 2022 07:28:00 GMT

Cache-Control: max-age=3600告诉浏览器该资源在3600秒（1小时）内都是新鲜的，可以直接使用。Expires是一个绝对时间戳，但优先级低于Cache-Control。现代开发中主要使用Cache-Control，因为它更精确且是相对时间。

协商缓存：与服务器确认

当强缓存失效（例如max-age时间已过），浏览器会携带缓存标识向服务器发起请求，询问资源是否被修改过。如果未被修改（304状态码），则继续使用缓存；如果已修改，则返回新资源。这被称为协商缓存，它一定会发起一次HTTP请求。

# 请求头（浏览器发送）
If-Modified-Since: Wed, 21 Oct 2021 07:28:00 GMT
If-None-Match: "abc123"
# 响应头（服务器返回）
HTTP/1.1 304 Not Modified
ETag: "abc123"
Last-Modified: Wed, 21 Oct 2021 07:28:00 GMT

服务器通过ETag（资源唯一标识）和Last-Modified（最后修改时间）两个响应头来提供验证信息。浏览器下次请求时会带上If-None-Match和If-Modified-Since与之对应。ETag的优先级通常高于Last-Modified，因为它能更精准地判断内容变化。

缓存位置与过程

一次完整的请求会依次检查以下缓存位置：

1. Service Worker Cache：由JavaScript控制，可编程，拦截请求。
2. Memory Cache：内存缓存，速度最快，会话级。
3. Disk Cache：磁盘缓存，容量大，持久化。
4. 网络请求：如果以上都未命中，则发起请求。

实践中的缓存策略

针对不同类型的资源，应采用不同的缓存策略。这主要通过服务器设置Cache-Control实现。

# 几乎不会变的静态资源（如带哈希的文件名）
Cache-Control: public, max-age=31536000, immutable
# 可能更新的资源（如CSS、JS）
Cache-Control: public, max-age=86400
# 需要实时性的HTML页面
Cache-Control: no-cache
# 绝对隐私数据
Cache-Control: no-store

• max-age：设置缓存新鲜时间。
• no-cache：可以缓存，但每次使用前必须向服务器验证（即启用协商缓存）。
• no-store：禁止任何缓存，每次都从服务器获取。
• immutable：向用户声明资源不会改变，浏览器可放心使用强缓存。

理解并正确配置缓存是前端工程化和后端部署的重要环节。它直接决定了用户感知的加载速度、服务器负载以及版本更新的生效方式。合理的缓存策略是高性能网站的基础。