JavaScript 中强缓存 Expires 字段怎么配置使用-js教程-PHP中文网

expires是http/1.0兼容的强缓存响应头，由服务器设置gmt格式过期时间，浏览器比对本地时间决定是否命中缓存；js无法直接配置，仅能通过版本化url、资源哈希等间接影响。

javascript 中强缓存 expires 字段怎么配置使用

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

你真正能做的，是配合后端策略，通过资源命名、版本控制或接口调用，间接影响 Expires 是否生效、何时过期。

Expires 是什么、怎么起作用

Expires 是 HTTP/1.0 兼容的强缓存响应头，格式为 GMT 时间字符串，例如：
Expires: Wed, 21 Oct 2027 07:28:00 GMT
浏览器收到后，拿本地系统时间跟这个时间比：
- 当前时间 ≤ Expires 时间 → 直接读缓存（状态码显示 200 (from memory cache)）
- 当前时间 > Expires 时间 → 缓存失效，发起新请求
⚠️ 它依赖客户端本地时间准确。如果用户手动改了系统时间，缓存行为就会异常。

什么时候该用 Expires

适合静态资源：比如带哈希值的 JS/CSS 文件（如 app.a1b2c3.js），可设长期缓存（如 1 年）
不适合动态内容：HTML 页面、API 接口、用户头像等，应禁用强缓存或设极短有效期
不推荐单独使用：Expires 是老协议字段，现代浏览器优先认 Cache-Control，且 max-age 更可靠（不依赖本地时间）

怎么配合服务端正确配置

Nginx 示例（常用且典型）：

deep-java-review

Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...

下载

# JS/CSS（带哈希）→ 长期缓存
location ~* \.(js|css)$ {
    expires 1y;
    add_header Cache-Control "public, immutable, max-age=31536000";
}

# 图片 → 30 天
location ~* \.(jpg|png|webp|gif)$ {
    expires 30d;
    add_header Cache-Control "public, max-age=2592000";
}

# HTML → 禁用强缓存
location ~* \.html$ {
    expires epoch;
    add_header Cache-Control "no-cache, must-revalidate";
}

关键点：

expires epoch 表示立即过期
add_header Cache-Control 必须显式加上，否则 Expires 单独存在效果有限
immutable 对带哈希资源很实用，告诉浏览器“内容永不变更”，跳过刷新时的 If-Modified-Since 请求

JavaScript 能做什么（间接影响）

虽然 JS 不能设 Expires，但可以：

动态加载资源时拼接时间戳或版本号，绕过缓存：
<script src="app.js?v=1.2.3"></script> 或 new Date().getTime()
监听 beforeunload 或调用后端登出接口，让服务端主动失效相关资源缓存策略
在构建阶段生成带哈希的文件名，让服务端对这类文件启用长期 Expires

不复杂但容易忽略

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南