javascript中的浏览器缓存如何控制_缓存策略有哪些
浏览器缓存由HTTP响应头控制，JavaScript无法直接设置，但可通过URL策略、资源加载方式和服务端响应头间接影响；关键响应头包括Cache-Control、Expires、ETag和Last-Modified，分别用于指令式缓存、过期时间、协商缓存验证等。
浏览器缓存由 HTTP 响应头控制，JavaScript 本身不能直接设置或清除 HTTP 缓存，但可以通过资源加载方式、URL 策略和配合服务端响应头来间接影响缓存行为。
关键缓存响应头有哪些
服务端通过以下响应头告诉浏览器如何缓存资源：
-
Cache-Control：最核心的缓存控制指令，优先级高于 Expires。常见值有：
• public / private（是否允许代理/CDN 缓存）
• max-age=3600（资源在本地可缓存 1 小时）
• no-cache（每次使用前必须向服务器验证新鲜度，可走 304）
• no-store（完全不缓存，敏感数据用）
• must-revalidate（过期后必须校验，不可跳过） - Expires：HTTP/1.0 兼容字段，指定一个绝对过期时间（GMT 格式），若与 Cache-Control 同时存在，后者优先。
- ETag / Last-Modified：用于协商缓存。浏览器后续请求带上 If-None-Match 或 If-Modified-Since，服务端比对后返回 304 Not Modified 或 200 + 新内容。
前端常用缓存控制技巧
虽然 JS 不能改响应头，但可通过操作资源 URL 或加载逻辑绕过或触发缓存：
-
版本化文件名：构建时将
app.js输出为app.a1b2c3.js，URL 变化 → 强制新请求，旧缓存自动
失效。 -
查询参数“戳”（cache busting）：动态添加时间戳或哈希，如
script.js?v=1.2.5或style.css?t=1734608040。注意：仅适用于非强缓存策略（如 no-cache 下有效；max-age 很长时可能被忽略）。 -
fetch API 中配置 cache 选项：对 AJAX 请求可显式控制：
fetch('/api/data', { cache: 'no-store' })
支持值包括：default、no-store、reload、no-cache、force-cache、only-if-cached。 -
动态 script 标签加载时禁用缓存：设置
script.crossOrigin = 'anonymous'并配合时间戳，或使用document.createElement('script')+script.src = url + '?t=' + Date.now()（适合调试或热更新场景）。
失效。常见缓存策略组合推荐
不同资源类型适用不同策略，典型搭配如下：
-
HTML 文件：建议
Cache-Control: no-cache或max-age=0，确保每次访问都校验更新（避免用户看到旧页面）。 -
JS/CSS/图片等静态资源：长期强缓存 + 内容哈希命名，如
Cache-Control: public, max-age=31536000（1 年），靠文件名变化驱动更新。 -
API 接口（JSON 数据）：根据业务决定，实时性要求高则用
no-store或no-cache；低频变动可设max-age=60（1 分钟）减少重复请求。 -
单页应用（SPA）的 index.html：务必避免强缓存，否则新 JS 已上线，但 HTML 仍加载旧入口，导致白屏或错版。推荐
Cache-Control: no-cache, must-revalidate。
验证与调试方法
快速确认缓存是否生效：
- 打开 Chrome DevTools → Network 面板，刷新页面，查看资源的 Size 列：显示 (memory cache) 或 (disk cache) 表示命中缓存；(from cache) 是 HTTP 缓存复用；(from service worker) 属于更上层控制。
- 检查 Response Headers，确认是否存在
Cache-Control、ETag等字段及取值是否符合预期。 - 按 Ctrl+F5（硬刷新）会忽略强缓存，强制走网络；普通 F5 会尊重
max-age但可能触发协商缓存。
