浏览器缓存优化关键在于让资源自然被缓存复用：静态资源配Cache-Control（如public, max-age=31536000, immutable），HTML用短时效+ETag，构建加内容哈希，第三方库单独打包，preload关键资源，Service Worker增强缓存能力。
直接靠浏览器缓存就能让二次访问快很多，关键不是写代码去“操作”缓存，而是让资源自然被缓存、高效被复用。
配对合理的缓存响应头
静态资源（JS/CSS/字体/图片）必须返回明确的 Cache-Control 头，比如：
-
Cache-Control: public, max-age=31536000, immutable —— 适用于带内容哈希的文件（如
app.a1b2c3.js），告诉浏览器“一年内不用再问服务器”，既进 memory cache 也进 disk cache - 避免
no-cache或no-store，它们会直接跳过内存缓存，哪怕资源本身很轻量 - HTML 文件建议用短时效（如
max-age=300）+ ETag 协商缓存，确保能及时获取更新
构建时加内容哈希
文件名里嵌入哈希值（如 Webpack 的 [contenthash] 或 Vite 默认行为），是缓存安全的前提：
- 内容不变 → 哈希不变 → 浏览器复用旧缓存
- 内容一改 → 哈希变 → 新请求触发新缓存，彻底避开“缓存未更新导致白屏或功能异常”的问题
- 第三方库单独打包（
vendorchunk），长期缓存，复用率更高
用 preload 提前加载关键资源
memory cache 生命周期短（仅当前页面会话），但可以靠 <link rel="preload"> 把核心 JS/CSS 提前拉进内存：
立即学习“Java免费学习笔记（深入）”；
- 在 HTML 中声明：
<link rel="preload" href="main.abc123.js" as="script"> - 它不阻塞渲染，但让资源更早下载、更早进入 memory cache，后续动态 import 或执行时大概率命中
- 别乱 preloads 所有资源，只针对首屏必需、体积适中、复用率高的资源
配合 Service Worker 延伸缓存能力
memory cache 刷新就丢，disk cache 关闭再开还在，而 Service Worker 能把两者串起来：
- 安装阶段预缓存 HTML + 核心 JS/CSS，实现“关掉再打开秒出”
- 对静态资源用 cache-first 策略：优先读 disk cache，网络只作后备
- 对 API 数据用 stale-while-revalidate：先展示缓存数据，后台悄悄更新，兼顾速度与新鲜度
不复杂但容易忽略：缓存不是设了头就完事，得让资源名稳定、加载时机合理、更新机制可靠。三者齐备，二次访问才能真正接近“瞬间呈现”。
