request.destination 是浏览器自动设置的只读属性，标识请求预期用途，可高概率反推触发标签：'document'对应导航、'script'对应脚本、'style'对应样式、'image'对应图片等，用于Service Worker精准缓存策略。
request.destination 是 Request 对象的一个只读属性，由浏览器自动设置，用于标识该请求的预期用途（即资源类型和上下文），它不是直接告诉你“哪个 HTML 标签发的”，而是告诉你“这个请求在页面中打算用来干什么”。结合 HTML 规范和浏览器行为，我们可以高概率反推触发标签。
为什么 destination 能反映 HTML 标签来源
浏览器在解析 HTML 或执行 JS 时，对不同语义的资源加载会显式指定 destination。例如：
-
<link rel="stylesheet">加载 CSS →destination === 'style' -
<script src="...">加载脚本 →destination === 'script' -
<img src="...">加载图片 →destination === 'image' -
<iframe src="...">加载子文档 →destination === 'iframe' -
<a href="...">点击跳转 →destination === 'document'（前提是导航到新页面） -
<form method="get">提交 →destination === 'document'（GET 表单提交会触发页面导航） -
fetch('/api/data')或XMLHttpRequest→destination === 'empty'（无预期资源类型） -
fetch('/data.json')→destination === 'json'（现代浏览器对常见后缀有启发式识别）
注意：destination 是浏览器内部设定，开发者无法手动修改，因此可靠、稳定、无需正则匹配 URL。
常见 destination 值与对应 HTML 触发方式对照表
-
'document'立即学习“前端免费学习笔记（深入）”；
- 页面首次加载（主 HTML 文档）
-
<a href="/about">点击跳转 -
<form method="get" action="/search">提交后跳转 -
<meta http-equiv="refresh" content="0;url=/home">（部分浏览器）
✅ 判断要点：该请求会导致整个页面内容被替换（即导航）
-
'script'
anything-to-html下载将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
<script src="app.js"> -
<script type="module" src="main.mjs"> - 动态
import()（如import('./utils.js')）
❗不包括内联<script>（无网络请求，无 destination）
-
-
'style'-
<link rel="stylesheet" href="theme.css"> -
<link rel="preload" as="style" href="print.css">
❗不包括<style>内联样式（无请求）
-
-
'image'-
<img src="logo.png"> -
<img srcset="small.jpg 480w, large.jpg 1024w"> -
<picture>中的<source>和<img> - CSS 中
background-image: url(...)（但注意：CSS 内部请求的 destination 是'image'，但由样式表触发，不是直接 HTML 标签）
-
-
'font'-
@font-face { src: url('font.woff2') }（CSS 触发，非 HTML 标签）
❌ 无直接 HTML 标签（<link rel="preload" as="font">是例外，destination 为'font'）
-
-
'json','text','empty'- 几乎全部来自 JavaScript：
fetch()、axios、$.ajax - 少数情况：
<link rel="prefetch" as="fetch" href="/data.json">→destination === 'json'
✅ 可安全排除 HTML 标签直触，归为 JS 主动发起
- 几乎全部来自 JavaScript：
实际使用建议（Service Worker 中）
self.addEventListener('fetch', event => {
const { destination } = event.request;
if (destination === 'document') {
// 处理 HTML 导航：返回缓存首页 or offline fallback
event.respondWith(
caches.match(event.request).then(r => r || caches.match('/offline.html'))
);
} else if (destination === 'script' || destination === 'style' || destination === 'image') {
// 静态资源：优先缓存，支持离线
event.respondWith(
caches.match(event.request).then(r => r || fetch(event.request))
);
} else if (destination === 'json' || destination === 'empty') {
// API 请求：不缓存或仅短时缓存，避免数据陈旧
event.respondWith(fetch(event.request));
}
});⚠️ 注意：
<iframe src="...">的 destination 是'iframe'，不是'document'；它加载的是嵌入文档，需单独处理（常按'document'类似逻辑兜底）。
不能依赖 destination 的边界情况
-
<link rel="icon" href="favicon.ico">→destination === 'image'（但语义是图标，不是普通图） -
<audio src="song.mp3">/<video src="clip.mp4">→destination === 'audio'/'video'（HTML5 新增值，需兼容判断） -
<link rel="preload" as="fetch">→destination === 'empty'，但实际是预取 JSON，需结合event.request.headers.get('purpose')（实验性，不推荐依赖） - 第三方库动态插入标签（如 lazyload 库创建
<img>）→ destination 仍为'image'，来源不可追溯，但用途明确
本质上，request.destination 不是“溯源标签”，而是“用途声明”。它足够精准支撑缓存策略、离线逻辑和性能优化，无需也不应强行映射到具体 DOM 元素。
