JavaScript 中强缓存怎么配置 Expires 响应头控制过期时间-js教程-PHP中文网

expires 响应头必须由服务器设置，javascript 无法直接配置或修改；其生效依赖客户端本地时间，通过对比当前时间与 expires 时间决定缓存是否命中；推荐对带哈希的静态 js 长期缓存，对无版本号 js 设置短有效期，避免给 html 或动态接口配置 expires。

javascript 中强缓存怎么配置 expires 响应头控制过期时间

JavaScript 本身不能直接配置 Expires 响应头——这个头必须由服务器在 HTTP 响应中设置。浏览器只读取并遵守它，JS 无法生成、修改或删除该头。

你真正能做的，是配合服务端策略，通过 URL 设计、资源版本化、或调用后端接口来间接影响 Expires 是否生效、何时过期。

什么时候 `Expires` 会起作用

Expires 是 HTTP/1.0 兼容的强缓存头，格式为 GMT 时间字符串，例如：

Expires: Wed, 21 Oct 2027 07:28:00 GMT

浏览器收到后，会把该时间与本地系统时间对比：

若当前时间 ≤ Expires 时间 → 直接读缓存（状态码显示 200 (from memory cache) 或 200 (from disk cache)）
若当前时间 > Expires 时间 → 缓存失效，发起新请求

⚠️ 注意：Expires 的有效性依赖客户端本地时间准确。如果用户手动改了系统时间，缓存行为就会异常。

如何让 `Expires` 配合 JS 场景合理生效

✅ 对带哈希名的静态 JS 文件（推荐）

比如 app.a1b2c3.js，内容不变时文件名不变，可长期缓存：

js2java

JavaScript 到 Java 全栈翻译助手，专为前端开发者学习 Java 或快速实现后端业务逻辑而设计。当用户提到以下场景时必须使用此技能： - "帮我把这段 JS 代码转成 Java" - "用 Java 怎么写这个逻辑" - "我习惯用 JS 写，想翻译成 Java" - "教我 Java，我要写后端接...

下载

服务端配置 Nginx：
```
location ~* \.js$ {
    expires 1y;
    add_header Cache-Control "public, immutable, max-age=31536000";
}
```
这样 Expires 会自动设为一年后 GMT 时间，且 Cache-Control 优先级更高，双重保障。

✅ 对无版本号的通用 JS（如 `common.js`）

内容可能更新但文件名不变，不宜缓存太久：

设 expires 1h 或 expires 1d，避免用户卡旧逻辑
同时配 Cache-Control: public, max-age=3600，更可控

❌ 不要给 HTML 或动态 JS 接口加 `Expires`

比如 /api/data.js 或 index.html：

误配 expires 1d 可能导致页面白屏或功能错乱
正确做法是 expires epoch（即 Expires: Thu, 01 Jan 1970 00:00:01 GMT）或 Cache-Control: no-cache, must-revalidate

JS 能做的“辅助动作”

强制刷新某脚本：加时间戳或版本参数（不推荐用于生产，破坏缓存）

const script = document.createElement('script');
script.src = '/app.js?v=' + Date.now(); // ⚠️ 绕过所有缓存
document.head.appendChild(script);

检测缓存是否命中（仅调试用）：
无法直接读缓存状态，但可通过 performance.getEntriesByType('resource') 查看加载是否为 from-memory-cache 或 from-disk-cache。
配合 Service Worker 管理缓存生命周期：
即使服务端返回了 Expires，SW 仍可拦截请求、自定义缓存逻辑、甚至忽略 Expires。