HTML中link标签rel设为dns-prefetch怎么减少第三方接口的DNS解析延迟-html教程-PHP中文网

dns-prefetch标签必须以//开头指定纯域名，位置需在meta和title后首个跨域资源前，仅对后续异步请求有效，验证需清缓存并检查timing面板中dns lookup是否提前。

html中link标签rel设为dns-prefetch怎么减少第三方接口的dns解析延迟

href必须是//开头的纯域名，否则整个标签静默失效

浏览器只从href中提取主机名做 DNS 查询，其余内容全丢弃，且不报任何错误。写错等于没写，但你根本查不到它失效了。

✅ 正确：<link rel="dns-prefetch" href="//api.example.com">
✅ 可接受（HTTPS 页面更稳）：<link rel="dns-prefetch" href="https://api.example.com">
❌ 错误：<link rel="dns-prefetch" href="https://api.example.com/v1/user">（含路径，整个标签被忽略）
❌ 错误：<link rel="dns-prefetch" href="http://api.example.com">（HTTPS 页面大概率跳过）
❌ 错误：<link rel="dns-prefetch" href="api.example.com">（缺协议标识，被当成本地路径）

特别注意：如果目标 API 只支持 HTTPS，而当前页是 HTTP，//api.example.com 会降级为 HTTP 请求并失败——此时应换用 <link rel="preconnect" href="https://api.example.com" crossorigin>。

必须放在最前面，晚于首个CSS/JS就基本没用

浏览器流式解析 HTML，<link rel="dns-prefetch"> 一读到就排队执行。如果它出现在第一个 <link rel="stylesheet"> 或 <script src="...>%20%E4%B9%8B%E5%90%8E%EF%BC%8C%E7%9B%B8%E5%85%B3%E8%AF%B7%E6%B1%82%E5%BE%80%E5%BE%80%E5%B7%B2%E7%BB%8F%E5%8F%91%E5%87%BA%E3%80%82

anything-to-html

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

下载

%0A

%E2%9C%85%20%E6%8E%A8%E8%8D%90%E4%BD%8D%E7%BD%AE%EF%BC%9A<meta%20charset>%20%E5%92%8C%20<title>%20%E4%B9%8B%E5%90%8E%E3%80%81%E9%A6%96%E4%B8%AA%E8%B7%A8%E5%9F%9F%E8%B5%84%E6%BA%90%E6%A0%87%E7%AD%BE%E4%B9%8B%E5%89%8D
%E2%9D%8C%20%E6%97%A0%E6%95%88%E4%BD%8D%E7%BD%AE%EF%BC%9A%E5%A1%9E%E5%9C%A8%20<body>%20%E9%87%8C%E3%80%81%E5%8C%85%E8%A3%B9%E5%9C%A8%20<template>%20%E4%B8%AD%E3%80%81%E6%88%96%E7%94%B1%20JS%20%E5%8A%A8%E6%80%81%E6%8F%92%E5%85%A5%EF%BC%88%E5%A6%82%20document.createElement('link')%EF%BC%89
%E2%9A%A0%EF%B8%8F%20%E5%8D%B3%E4%BD%BF%E4%BD%8D%E7%BD%AE%E6%AD%A3%E7%A1%AE%EF%BC%8C%E8%8B%A5%E5%89%8D%E9%9D%A2%E5%A0%86%E4%BA%86%E5%A4%A7%E9%87%8F%E9%98%BB%E5%A1%9E%E8%B5%84%E6%BA%90%EF%BC%8CDNS%20%E6%9F%A5%E8%AF%A2%E5%8F%AF%E8%83%BD%E8%A2%AB%E8%B0%83%E5%BA%A6%E5%BB%B6%E8%BF%9F%EF%BC%9BSafari%20%E6%9B%B4%E4%BF%9D%E5%AE%88%EF%BC%8C%E5%B8%B8%E7%AD%89%E5%88%B0%E7%A9%BA%E9%97%B2%E6%88%96%E7%94%A8%E6%88%B7%E4%BA%A4%E4%BA%92%E5%90%8E%E6%89%8D%E6%89%A7%E8%A1%8C

%0A%0A

%E5%8F%AA%E5%AF%B9%E5%90%8E%E7%BB%AD%E7%9C%9F%E5%AE%9E%E5%8F%91%E8%B5%B7%E7%9A%84%E7%AC%AC%E4%B8%89%E6%96%B9%E6%8E%A5%E5%8F%A3%E8%AF%B7%E6%B1%82%E6%9C%89%E6%95%88

%0A

dns-prefetch%20%E4%B8%8D%E5%8A%A0%E9%80%9F%E9%A6%96%E5%B1%8F%E8%B5%84%E6%BA%90%EF%BC%8C%E5%8F%AA%E5%BD%B1%E5%93%8D%20JS%20%E4%B8%AD%20fetch()%E3%80%81XMLHttpRequest%E3%80%81%E6%87%92%E5%8A%A0%E8%BD%BD%E7%BB%84%E4%BB%B6%E7%AD%89%E5%90%8E%E7%BB%AD%E5%BC%82%E6%AD%A5%E8%AF%B7%E6%B1%82%E3%80%82%E5%AE%83%E4%B8%8D%E4%BF%9D%E8%AF%81%E6%89%A7%E8%A1%8C%EF%BC%8C%E5%8F%AA%E2%80%9C%E6%8F%90%E7%A4%BA%E2%80%9D%E6%B5%8F%E8%A7%88%E5%99%A8%E6%8F%90%E5%89%8D%E6%9F%A5%20IP%E3%80%82

%0A

%E2%9C%85%20%E6%9C%89%E6%95%88%E5%9C%BA%E6%99%AF%EF%BC%9A%E9%A1%B5%E9%9D%A2%E5%88%9D%E5%A7%8B%E5%8C%96%E5%90%8E%E8%B0%83%E7%94%A8%20fetch(" https:>，且已声明 <code><link rel="dns-prefetch" href="//api.example.com"></script>
❌ 无效场景：加了 //backup.api.com，但 JS 里根本没发请求；或同源接口（如 /api/user）也加了，纯属浪费
⚠️ 每个预解析占用浏览器 DNS 并发队列（通常限 6～10 个），乱加会挤占真实请求的槽位

验证是否真起作用，别看首屏时间

收益只在「首次访问该域名且无缓存」时明显。缓存命中时 Timing 面板显示 DNS 时间为 0 是正常现象，不是优化失效。

✅ 正确验证方式：Chrome DevTools → Network → 找到目标接口请求 → 切换到「Timing」标签页 → 确认「DNS Lookup」阶段是否出现在 Start render 之前，且耗时明显低于未加时基线值
✅ 必须清空缓存：chrome://net-internals/#dns → 点「Clear host cache」
✅ 禁用 uBlock Origin 等广告拦截扩展，它们会主动屏蔽 dns-prefetch 请求
⚠️ 别对比「加了 vs 没加」的平均首屏时间——JS 执行、渲染阻塞等噪声会淹没真实收益

真正影响效果的从来不是“加没加”，而是“加得准不准、放得早不早、用得上不上”。它不报错、不警告、也不留日志，唯一证据藏在 Timing 面板里。