如何通过 Request.destination 判定当前网络请求是由什么 HTML 标签触发的-js教程-PHP中文网

request.destination 是浏览器自动设置的只读属性，标识请求预期用途，可高概率反推触发标签：'document'对应导航、'script'对应脚本、'style'对应样式、'image'对应图片等，用于service worker精准缓存策略。

如何通过 request.destination 判定当前网络请求是由什么 html 标签触发的

request.destination 是 Request 对象的一个只读属性，由浏览器自动设置，用于标识该请求的预期用途（即资源类型和上下文），它不是直接告诉你“哪个 HTML 标签发的”，而是告诉你“这个请求在页面中打算用来干什么”。结合 HTML 规范和浏览器行为，我们可以高概率反推触发标签。

为什么 destination 能反映 HTML 标签来源

浏览器在解析 HTML 或执行 JS 时，对不同语义的资源加载会显式指定 destination。例如：

<link rel="stylesheet"> 加载 CSS → destination === 'style'
<script src="..."></script> 加载脚本 → destination === 'script'
<img src="..."> 加载图片 → destination === 'image'
<iframe src="..."></iframe> 加载子文档 → destination === 'iframe'
<a href="..."></a> 点击跳转 → destination === 'document'（前提是导航到新页面）
<form method="get"></form> 提交 → destination === 'document'（GET 表单提交会触发页面导航）
fetch('/api/data') 或 XMLHttpRequest → destination === 'empty'（无预期资源类型）
fetch('/data.json') → destination === 'json'（现代浏览器对常见后缀有启发式识别）

注意：destination 是浏览器内部设定，开发者无法手动修改，因此可靠、稳定、无需正则匹配 URL。

常见 destination 值与对应 HTML 触发方式对照表

'document'
- 页面首次加载（主 HTML 文档）
- <a href="/about"></a> 点击跳转
- <form method="get" action="/search"></form> 提交后跳转
- <meta http-equiv="refresh" content="0;url=/home">（部分浏览器）
  ✅ 判断要点：该请求会导致整个页面内容被替换（即导航）
'script'
- <script src="app.js"></script>
- <script type="module" src="main.mjs"></script>
- 动态 import()（如 import('./utils.js')）
  ❗不包括内联 <script></script>（无网络请求，无 destination）
'style'

anything-to-html
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载
- <link rel="stylesheet" href="theme.css">
- <link rel="preload" as="style" href="print.css">
  ❗不包括 <style></style> 内联样式（无请求）
'image'
- <img src="logo.png">
- <img srcset="small.jpg 480w, large.jpg 1024w">
- <picture></picture> 中的 <source></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 主动发起

实际使用建议（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="..."></iframe> 的 destination 是 'iframe'，不是 'document'；它加载的是嵌入文档，需单独处理（常按 'document' 类似逻辑兜底）。

不能依赖 destination 的边界情况

<link rel="icon" href="favicon.ico"> → destination === 'image'（但语义是图标，不是普通图）
<audio src="song.mp3"></audio> / <video src="clip.mp4"></video> → destination === 'audio' / 'video'（HTML5 新增值，需兼容判断）
<link rel="preload" as="fetch"> → destination === 'empty'，但实际是预取 JSON，需结合 event.request.headers.get('purpose')（实验性，不推荐依赖）
第三方库动态插入标签（如 lazyload 库创建 <img>）→ destination 仍为 'image'，来源不可追溯，但用途明确