preconnect必须置于head最顶部、紧接meta charset后且早于首个link或script，跨域域名须显式添加crossorigin属性（同源也需），Chrome并发上限6个，建议控制在3–4个，仅用于首屏必用的HTTPS域名。
preconnect 必须写在 最前面，且带 crossorigin
浏览器只在 HTML 解析早期识别 preconnect，一旦开始构建 DOM 或遇到 <script></script> 就不再处理。它必须紧接在 <meta charset> 后、<title></title> 前，否则连接建立被推迟，弱网下可能多耗 300ms+。
所有跨域域名（包括 CDN、字体服务、API 域名）都必须显式加 crossorigin 属性——Safari 和部分旧版 Chrome 会直接忽略不带它的 preconnect 标签，即使同源也得加。
-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>✅ -
<link rel="preconnect" href="https://cdn.example.com">❌（Safari 无视） -
<link rel="preconnect" href="https://api.example.com" crossorigin>✅（哪怕你只用 fetch，也建议提前连）
别超过 4–6 个 preconnect，否则抢主站连接
浏览器对并发 TCP 连接数有硬限制（通常为 6），每个 preconnect 都会占用一个连接槽位。如果预连了太多第三方域名，主站资源（如 main.css、app.js）可能被迫排队，反而拖慢首屏。
只对确定会在当前页发起请求的域名使用：fonts.gstatic.com（字体）、cdn.example.com（静态资源）、api.example.com（关键接口）。不要为 analytics、广告、埋点等非首屏依赖的域名加。
立即学习“前端免费学习笔记（深入）”；
- 检查 Network 面板中
Initiator列，确认哪些域名真发起了请求 - 用 Lighthouse 的 “Avoid multiple page redirects” 审计项反向验证：若发现大量 DNS/TLS 时间，说明 preconnect 没覆盖到关键域名
- 多个
preconnect之间无顺序依赖，但必须全部出现在首个<script></script>标签之前
preconnect 后不能立刻发请求，要留出 100ms 空隙
连接建立（DNS + TCP + TLS）需要时间，浏览器不会保证 preconnect 声明后下一毫秒就能复用。如果紧接着就写 <link rel="preload" href="https://cdn.example.com/main.css">，部分请求仍可能走全新连接，失去优化意义。
稳妥做法是在 preconnect 和首个使用该域名的资源之间，插入至少一个其他标签（比如 <meta name="viewport">），或确保它们之间有明显解析间隔。实测中，100ms 是多数场景下连接真正就绪的保守阈值。
- 错误示范：
<link rel="preconnect" ...> <link rel="preload" href="https://cdn.example.com/...">（紧挨着） - 正确做法：
<link rel="preconnect" ...> <meta name="viewport"> <link rel="preload" ...> - Chrome DevTools 的 Timing 选项卡里，若看到某资源的 “Connection Start” 时间远晚于 preconnect 发起时间，说明没复用成功
preconnect 不是 dns-prefetch 的升级版，二者定位不同
dns-prefetch 只做 DNS 查询，开销极小，适合兼容老浏览器；preconnect 是完整建连，效果更强但有连接数成本。它们不是替代关系，而是互补：现代项目应主用 preconnect，仅对 IE 或 Android 4.x 等已淘汰环境才考虑降级到 dns-prefetch。
别混用：同一域名同时写两者毫无收益，还增加 HTML 体积。也不要用 dns-prefetch 替代 preconnect 来“省连接数”——该省的是域名数量，不是协议层级。
-
<link rel="preconnect" href="https://cdn.example.com" crossorigin>—— 主力方案 -
<link rel="dns-prefetch" href="https://cdn.example.com">—— 仅当明确需支持 Safari 11 以下或 Chrome 60 以下时添加 - 不加
crossorigin的dns-prefetch在跨域时仍有效，这是它和preconnect的关键区别
href 协议、主机名、端口完全一致。写成 https://cdn.example.com 却在 preload 中用 http://cdn.example.com，或漏掉端口号（如 :443），连接都不会复用。 
