dns-prefetch 的 href 必须为 // 开头的纯域名（如//cdn.example.com）或显式 HTTPS 完整 URL，含路径、协议头、端口或缺双斜杠均被浏览器静默忽略，且不报错；需置于 head 靠前位置，仅对后续确有请求的第三方跨域域名有效。
dns-prefetch 的 href 格式必须是 // 开头的纯域名
写错格式的 <link rel="dns-prefetch"> 标签会被浏览器静默忽略，不报错、不警告，查起来极难定位。核心就一条：href 值只能是协议相对 URL，且仅含主机名（含子域），不能带任何路径、参数、端口或协议头。
常见错误包括：
-
href="https://cdn.example.com"—— 显式 HTTPS，在旧版 Safari 或混合协议页中大概率跳过 -
href="//cdn.example.com/js/app.js"—— 含路径，整个标签被忽略 -
href="cdn.example.com"—— 缺双斜杠，被当成本地相对路径处理 -
href="//*.example.com"—— 通配符无效，DNS 不支持泛解析预加载
正确写法只有两种：href="//cdn.example.com"（推荐）或 href="https://fonts.googleapis.com"（HTTPS 页面中更稳，避免字体服务因协议降级失败）。
preconnect 必须显式声明协议且带 crossorigin（如需跨域）
<link rel="preconnect"> 比 dns-prefetch 更激进，它会触发 DNS + TCP + TLS 全流程，因此对格式和上下文更敏感。
立即学习“前端免费学习笔记（深入）”；
关键约束：
- 必须写明协议：
href="https://fonts.gstatic.com"，不能用//协议相对写法 —— preconnect 需要明确连接方式 - 跨域资源必须加
crossorigin属性，否则 TLS 握手可能失败或被降级（尤其字体、CDN 图片等） - 同一域名不能同时写
dns-prefetch和preconnect—— 后者会覆盖前者，白写
例如 Google Fonts 的两个域名必须分开处理：<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
两者在 <head> 中的位置和顺序不能乱
浏览器是流式解析 HTML 的，dns-prefetch 和 preconnect 都得在首个外部资源（比如 <link rel="stylesheet"> 或 <script src="...">）之前出现，否则相关请求早已发出，预操作完全失效。
理想顺序是：
<meta charset="utf-8"><title><link rel="dns-prefetch" href="//cdn.example.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>- 首个
<link rel="stylesheet">或<script>
绝对不能：
- 塞进
<body>或<template>里 - 用 JS 动态创建插入（
document.createElement('link')） - 放在大量 CSS/JS 之后 —— 即使标签存在，也可能被首屏资源抢占调度优先级
哪些域名该加、哪些不该加，直接决定效果还是反效果
每个 dns-prefetch 是一次真实 DNS 查询，每个 preconnect 是一次完整连接建立；浏览器并发上限通常为 6～10 个。乱加不仅没收益，还可能挤占真实请求资源。
值得加的（按优先级）：
-
//cdn.example.com—— 页面图片、JS、CSS 真实从该域名加载 -
//api.example.com—— 首屏后立即发起的 fetch 请求目标 -
https://fonts.gstatic.com（带crossorigin）—— 字体服务高频且延迟敏感 -
//hm.baidu.com—— 统计 SDK 初始化必发，且域名稳定
明确不该加的：
-
//your-site.com—— 同源，DNS 已缓存，冗余 -
//ad.doubleclick.net—— 广告域名不稳定、常被拦截、用户交互后才触发 -
//admin.example.com—— 子域与主域共享 DNS 缓存 -
//backup-cdn.example.com—— 备用域名未实际使用，纯属凑数
最易被忽略的一点：移动端弱网下，过多 dns-prefetch 可能抢占系统 DNS 查询队列，单页建议控制在 3–5 个以内，且只保留真正影响首屏或核心交互的那几个。
