企业官网建设流程全解析

一、HTTP 缓存的分类

HTTP 缓存主要分为两类：

1. 强缓存（Strong Cache）
   浏览器在命中强缓存时，不会向服务器发送请求，直接使用本地缓存资源。
   控制字段主要有：

   • Cache-Control（HTTP/1.1）：优先级更高，常用指令包括：
     • max-age=3600：资源在 3600 秒内有效
     • no-cache：跳过强缓存，但会进行协商缓存
     • no-store：禁止缓存
     • public/private：是否可被共享缓存（如 CDN）存储
   • Expires（HTTP/1.0）：指定一个绝对过期时间（如Expires: Wed, 21 Oct 2025 07:28:00 GMT），但受客户端时间影响，已被Cache-Control取代。

2. 协商缓存（Revalidation / Weak Cache）
   当强缓存失效后，浏览器会携带缓存标识向服务器验证资源是否更新。若未更新，服务器返回304 Not Modified，浏览器继续使用本地缓存；否则返回新资源（200）。
   主要通过以下头部实现：

   • Last-Modified+If-Modified-Since：基于文件最后修改时间
   • ETag+If-None-Match：基于资源内容生成的唯一标识（更精确，优先级高于 Last-Modified）

注意：Cache-Control: no-cache并不是“不缓存”，而是跳过强缓存，强制走协商缓存；而no-store才是完全禁止缓存。

二、缓存决策流程（简化版）

1. 浏览器发起请求；
2. 检查是否存在强缓存（Cache-Control或Expires）：
   • 若未过期 → 直接使用缓存（状态码 200 from disk/memory cache）；
   • 若已过期或无强缓存 → 进入协商缓存；
3. 发送带If-None-Match或If-Modified-Since的请求到服务器；
4. 服务器比对后：
   • 资源未变 → 返回 304，浏览器用缓存；
   • 资源已变 → 返回 200 + 新资源。

三、实际开发中的最佳实践

• 静态资源（JS/CSS/图片等）：
  使用Cache-Control: max-age=31536000（一年），并配合文件名哈希（如 bundle.a1b2c3.js）实现“永久缓存 + 内容更新即换名”。

• HTML 文件：
  通常设为Cache-Control: no-cache，确保每次都能获取最新入口，避免因缓存导致新版本无法加载。

• API 接口数据：
  一般不缓存（no-store）或短时间协商缓存，防止数据陈旧。

• CDN 场景：
  注意Cache-Control中public与private的区别，敏感数据应设为private，避免被中间代理缓存。

四、调试技巧

• Chrome DevTools → Network 面板：
  • Size列显示(memory cache)/(disk cache)表示命中强缓存；
  • 状态码304表示协商缓存命中；
  • 勾选Disable cache可临时禁用缓存（仅开发者工具打开时生效）。

总结

HTTP 缓存机制是性能优化的基石。合理配置Cache-Control、ETag等头部，结合构建工具的文件指纹策略，可以在保证内容实时性的同时最大化缓存收益。