外部 script 标签默认缓存,需通过时间戳(推荐)、随机数(慎用)或服务端哈希/版本号等方式使 url 唯一以绕过缓存;同时注意 url 合法性、csp 策略及服务端 cache-control 配置。

外部 script 标签通过 src 引入远程 JS 文件时,浏览器默认会缓存该资源。一旦缓存生效,即使服务端文件已更新,用户仍可能加载旧版本,导致功能异常或调试困难。控制缓存的关键在于让每次请求的 URL 不同,从而绕过缓存机制。
用时间戳强制刷新(推荐)
在 src 后拼接毫秒级时间戳,是最稳定、可预测的方式:
- ✅ 每次页面加载生成唯一 URL,如
utils.js?1717906567890 - ✅ 不依赖随机数,避免极低概率重复;也不依赖服务器时间,客户端可控
- ✅ 可直接用于动态创建:
script.src = 'api.js?' + Date.now(); - ⚠️ 注意:不要在静态 HTML 中硬写
Date.now(),它不会执行——必须用 JavaScript 动态设置
用随机数简单绕过(慎用)
适合开发环境快速验证,但不建议上线使用:
将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。
- ✅ 写法简单:
script.src = 'main.js?' + Math.random(); - ❌ 随机数可能重复,尤其高并发或短时间多次刷新时,仍有缓存命中风险
- ❌
document.write方式已过时,且在 DOM 解析完成后调用会清空整个页面,应避免
服务端配合更彻底(进阶)
单靠客户端加参数只能“骗”浏览器,真正可靠的方案需前后端协同:
- ✅ 构建阶段注入哈希值,如 Webpack 的
[contenthash],生成app.a1b2c3.js,文件名变则 URL 变 - ✅ 后端返回 HTML 时动态注入版本号,例如
script.js?v={{BUILD_VERSION}} - ⚠️ 单纯加
v=1.2.3手动维护易出错,版本不变时仍会缓存,不如时间戳或哈希自动可靠
其他关键细节不能漏
光加参数还不够,这些点常被忽略却直接影响效果:
路径必须是合法 URL,含空格、中文或未编码特殊字符会导致 net::ERR_ABORTED- 跨域脚本(如 CDN)加载失败时,
onerror只能捕获笼统的Script error.,无法看到真实堆栈 - CSP 策略若限制
script-src 'self',动态插入的 script 会被拦截,控制台报Refused to load the script - HTTP 响应头如
Cache-Control: max-age=31536000会让强缓存持续一年,此时前端加参也无效——得改服务端配置










