preconnect可省DNS+TCP+TLS三步，减少200–600ms TTFB，但仅对HTTPS、正确crossorigin、head顶部声明、且真实使用的首屏第三方域名（如cdn.example.com、fonts.gstatic.com）有效。
preconnect 能省掉 DNS + TCP + TLS 三步，对首屏立即 fetch 的第三方静态资源（比如 CDN 上的 JS/CSS）可减少 200–600ms TTFB，但必须满足四个硬条件：HTTPS 协议、crossorigin 正确、位置靠前、域名真被用上。
哪些第三方静态资源域名该加 preconnect
只加 HTML 或首屏 JS 中**已声明且立即请求**的域名，不是所有 CDN 都值得连：
-
https://cdn.example.com—— 如果你写了<link rel="stylesheet" href="https://cdn.example.com/main.css">且该 CSS 在首屏渲染前加载 -
https://fonts.gstatic.com—— Google Fonts 字体文件强制走 CORS，不加crossorigin就白连 -
https://unpkg.com或https://cdn.jsdelivr.net—— 只在<script src="...">直接引用且无延迟执行时才有效 - 别加
https://analytics.example.com—— 用户点击后才上报，预连连接大概率被回收 - 别为多个子域重复加 ——
cdn1.example.com和cdn2.example.com若共用同一套 DNS，只加https://example.com或根 CDN 域名即可
crossorigin 必须写对，否则连接建了也用不上
浏览器把带和不带 crossorigin 的连接视为两个完全隔离的池子。fetch 请求走 credentials 模式，就只能复用对应模式的 preconnect：
- ✅ 正确：
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>（空属性值，等价于crossorigin="anonymous"） - ❌ 错误：
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">（HTML 规范不认crossorigin=""，会被忽略） - ❌ 错误：
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous">（部分解析器报错或降级） - ⚠️ 特殊情况：如果 JS 里用了
fetch(url, { credentials: 'include' })，服务端必须返回Access-Control-Allow-Credentials: true，此时仍要保留crossorigin属性，但得确认服务端 CORS 配置匹配
preconnect 放哪儿、怎么写才真正生效
它不是“写了就起作用”，而是依赖浏览器流式解析顺序和 URL 格式校验：
立即学习“前端免费学习笔记（深入）”；
- 必须放在
<head>最顶部，<title>之后、第一个<link rel="stylesheet">或<script>之前；晚一行，可能错过关键解析时机 -
href必须是完整 HTTPS 协议 + 域名，不能含路径、端口或协议相对写法：
❌href="//cdn.example.com"（只触发 dns-prefetch）
❌href="https://cdn.example.com/js/app.js"（含路径，整个标签被忽略）
✅href="https://cdn.example.com" - 别写
http://—— HTTPS 页面下混合内容会被拦截，TLS 握手直接失败 - 最多加 3～4 个，Chrome 并发限制为 6，再多会静默丢弃，还可能挤占主站连接
怎么验证 preconnect 真起了作用
光看 HTML 有没有那行代码没用，得进 Chrome DevTools 看真实行为：
- 打开 Network 面板 → 筛选
Initiator列为preconnect（不是parser或script） - 检查该请求的
Time栏，应显示为Finished且耗时极短（通常 - 再发起对应域名的 fetch 或资源加载（比如
fetch("https://cdn.example.com/data.json")），观察 TTFB 是否明显下降（尤其在弱网模拟下） - 如果 Network 里根本看不到
preconnect请求，先检查是否写了http://、路径、或crossorigin写法错误
最容易被忽略的是：连接建好了，但 JS 在 preconnect 后 2 秒才发请求，此时连接大概率已被浏览器回收；或者服务端没返回正确的 CORS 头，导致预连的连接无法复用——这两点让很多团队以为 preconnect “没效果”，其实只是没对齐条件。
