HTML 的 标签加载的 .vtt 字幕受通用 HTTP 缓存控制，非独立缓存；更新字幕需修改 src 查询参数、修正服务器缓存头或更新 Service Worker 缓存策略。
HTML 字幕（<track></track> 标签加载的 .vtt 文件）不会被浏览器单独“标记为字幕缓存”，它和其他静态资源一样受通用 HTTP 缓存策略控制。所以清除“字幕标签缓存”的本质，是让浏览器重新请求 .vtt 文件，而不是复用已缓存版本。
为什么改了 .vtt 文件但页面不更新？
常见现象：你替换了服务器上的 subtitles.vtt，刷新页面后字幕还是旧的，甚至清空了“缓存的图片和文件”也无效。这是因为：
-
<track src="subtitles.vtt"></track>的请求走的是常规 HTTP 缓存流程，受响应头（如Cache-Control、ETag）控制，不是独立缓存机制 - 浏览器可能对
.vtt做了强缓存（比如服务器返回了Cache-Control: max-age=31536000），即使 HTML 本身没缓存，字幕仍被锁住 - Service Worker 若拦截了
.vtt请求且未更新缓存逻辑，也会导致字幕“卡死”
强制浏览器重新拉取 .vtt 文件的实操方法
不依赖清全局缓存，直击字幕资源本身：
- 在
<track></track>的src后加唯一查询参数，例如：subtitles.vtt?v=20261028或subtitles.vtt?ts=1766917342（时间戳）。每次更新字幕就改这个值，浏览器视为全新 URL，必发新请求 - 避免用简单递增数字（如
?v=1→?v=2），防止构建工具或 CDN 缓存该参数本身；推荐用构建时注入哈希或当前日期 - 如果用 JavaScript 动态设置
track.src，记得在赋值后调用track.track.mode = 'hidden'; track.track.mode = 'showing';触发重载（部分浏览器需此步）
检查并修正服务器对 .vtt 的缓存响应头
这是最易被忽略的根源。很多 Web 服务器默认对 .vtt 启用长缓存（尤其 Nginx / Apache 配置了 location ~ \.vtt$ 块）：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 开发/测试环境应设为：
Cache-Control: no-cache, must-revalidate或Cache-Control: max-age=0 - 生产环境若需缓存，请确保
ETag或Last-Modified正确响应，且字幕文件变更后这些值同步更新 - 用浏览器 DevTools 的
Network标签页查看.vtt请求的响应头，确认没有意外的max-age=31536000等强缓存指令
Service Worker 干扰字幕更新怎么办？
如果你的站点注册了 Service Worker（常见于 PWA），它很可能把 .vtt 放进了缓存策略里，而你忘了更新缓存版本：
- 打开 DevTools →
Application→Service Workers，点击 “Update on reload” 并刷新页面 - 检查 SW 脚本中是否缓存了
.vtt（如cache.addAll([...])或cache.match()逻辑），如有，必须升级 cache name 并清理旧 cache - 临时调试时，可勾选 “Bypass for network” 强制跳过 SW，验证是否为 SW 导致字幕不更新
真正影响字幕即时性的从来不是 HTML 标签本身，而是 .vtt 文件的网络请求路径是否被缓存策略、CDN、Service Worker 或浏览器预加载机制劫持——盯住 Network 面板里的那个具体请求，比反复清浏览器缓存有用十倍。
