强缓存与协商缓存是天然串联的两级缓存机制:浏览器先判断强缓存是否有效,若失效再发起条件请求走协商缓存;二者组合可兼顾加载速度、资源新鲜度与带宽节省。

强缓存与协商缓存不是二选一,而是天然串联的两级缓存机制:浏览器先走强缓存判断是否“完全跳过请求”,失效后再走协商缓存尝试“省流量复用”。合理组合二者,能兼顾加载速度、资源新鲜度和带宽节省。
强缓存设置:优先级高、响应快
用 Cache-Control 主控,避免依赖已过时的 Expires。关键点:
-
静态资源(JS/CSS/图片)设长时效:如
Cache-Control: public, max-age=31536000(1年),配合文件名哈希(app.a1b2c3.js)确保更新后自动失效 -
动态接口或 HTML 页面设短时效或禁用强缓存:如
Cache-Control: no-cache或max-age=0,让浏览器每次先走协商流程 -
注意
no-cache不等于“不缓存”:它只是强制进入协商阶段,仍可复用本地副本;真正禁止缓存要用no-store
协商缓存配置:精准验证、按需更新
强缓存失效后,浏览器自动携带条件请求头,服务端需正确响应。推荐优先使用 ETag:
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
-
ETag 更可靠:基于内容生成(如文件 hash 或响应 body 的 MD5),比
Last-Modified更准确(避免秒级修改冲突或时钟偏差) -
服务端逻辑示例:收到
If-None-Match后,比对当前资源 ETag;一致则返回304 Not Modified,不传 body;不一致则正常返回200+ 新ETag头 -
静态资源可由 Web 服务器自动支持:Nginx/Apache 默认启用 ETag;Node.js 框架(如 Express)可用
etag: true选项开启
组合策略落地要点
真实场景中需分层处理不同资源:
-
HTML 文件:设
Cache-Control: no-cache,搭配 ETag —— 保证首屏 HTML 总是最新,但变更不大时走 304 省带宽 -
带哈希的 JS/CSS:设
Cache-Control: public, max-age=31536000—— 强缓存覆盖整个生命周期,无需协商 -
API 接口数据:根据业务决定,如用户信息可设
max-age=60+ ETag;实时行情则用no-store - 开发调试时注意:Chrome DevTools 的 Network 面板勾选 “Disable cache” 会绕过强缓存,但不影响协商缓存逻辑,可用于单独测试 ETag 行为
Service Worker 补充控制
HTTP 缓存是浏览器自动行为,而 Service Worker 可主动干预:
- 在
fetch事件中,先查caches.match()(相当于自定义强缓存),未命中再发网络请求 - 请求返回后,可手动写入缓存并附加自定义校验逻辑(如时间戳+版本号),弥补 HTTP 缓存灵活性不足
- 适合需要离线优先、灰度发布、AB 测试等高级场景,但需谨慎管理缓存清理,避免旧版本残留
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南










