无需登录 数据私有 本地保存

HTTP缓存头检测 - ETag/Cache-Control分析

12
0
0
0

HTTP 缓存头检测 & 分析

分析 Cache-Control、ETag、Last-Modified、Expires 等缓存响应头，评估缓存策略，获取优化建议

URL 检测 通过 HEAD 请求获取响应头
部分网站可能因跨域限制无法获取，可切换至粘贴模式
粘贴响应头 从浏览器 DevTools 复制
📦 静态资源 📄 HTML页面 🔌 API响应 ☁️ CDN资源
常见问题 & 知识点
什么是 HTTP 缓存头？为什么它们很重要？
HTTP 缓存头是服务器在响应中返回的一组头部字段，用于控制浏览器和中间缓存（如CDN）如何存储和重用资源。合理配置缓存头可以显著减少网络请求、降低服务器负载、加快页面加载速度，从而提升用户体验和SEO排名。核心的缓存头包括 Cache-Control、ETag、Last-Modified 和 Expires。
Cache-Control 的常见指令有哪些？
max-age=<秒>：资源在缓存中的最大新鲜时间。
s-maxage=<秒>：仅对共享缓存（CDN）生效，优先级高于max-age。
no-cache：每次使用前必须向服务器验证（可配合ETag使用）。
no-store：完全禁止缓存，适用于敏感数据。
public：允许任何缓存（浏览器+CDN）存储。
private：仅允许浏览器缓存，CDN不缓存。
must-revalidate：过期后必须验证才能使用。
immutable：资源内容永不改变，浏览器在新鲜期内不会发起验证请求。
stale-while-revalidate=<秒>：异步验证期间允许使用过期资源。
ETag 是什么？强验证器和弱验证器有什么区别？
ETag（实体标签）是服务器为资源生成的唯一标识符，通常是哈希值或版本号。浏览器在条件请求中通过 If-None-Match 头发送ETag，服务器比对后决定返回304（未修改）或200（新内容）。

强验证器（如 ETag: "abc123"）：要求逐字节完全匹配。
弱验证器（如 ETag: W/"abc123"）：允许语义等价即可，W/前缀表示弱验证。弱ETag更适合动态生成的内容。
Last-Modified 和 ETag 哪个更好？
ETag 通常更精确。Last-Modified 只能精确到秒，且如果资源被重新生成但内容不变，Last-Modified会更新导致不必要的重新下载。ETag基于内容哈希，能准确判断内容是否真正变化。最佳实践是两者都设置，ETag优先级更高。
如何为静态资源配置最佳缓存策略？
对于带指纹/哈希的静态资源（如 app.a1b2c3.js），推荐使用：
Cache-Control: public, max-age=31536000, immutable
这表示资源可缓存1年且内容永不改变，浏览器在新鲜期内不会发起任何验证请求，实现最快的加载速度。对于不带指纹的静态资源，使用较短的max-age配合ETag/Last-Modified进行验证。
immutable 指令有什么用？
immutable 告诉浏览器资源内容永远不会改变。即使用户强制刷新页面（按F5），浏览器也不会发送条件验证请求，直接使用缓存。这避免了不必要的304响应，对于带内容哈希的静态资源非常有用。但注意：只对内容确实不可变的资源使用此指令，否则用户可能看不到更新。
stale-while-revalidate 解决了什么问题？
它允许浏览器在后台异步验证资源新鲜度的同时，先使用过期的缓存版本。这消除了"缓存过期瞬间"的等待时间，用户始终能快速看到内容。例如 Cache-Control: max-age=3600, stale-while-revalidate=86400 表示资源新鲜1小时，之后的24小时内即使过期也可以先使用缓存并在后台更新。
如何检测我的网站缓存是否配置正确？
使用本工具输入URL或粘贴响应头即可分析。也可以使用浏览器DevTools的Network面板查看响应头，或使用 curl -I https://your-site.com/resource 命令行查看。关注Cache-Control中max-age是否合理、是否设置了ETag或Last-Modified、敏感数据是否使用了no-store。
🔧 相关工具