rel="preconnect"仅对首屏1秒内必发请求的https第三方域名有效，须满足：域名https、href仅含协议+域名、带crossorigin属性、置于head顶部，否则连接白建。
rel="preconnect" 能实打实减少 200–600ms TTFB，但只对首屏立即发起请求的 HTTPS 第三方域名有效，且必须满足四个硬性条件——否则它建了连接也白建。
哪些域名加 preconnect 才真有用
它不是“所有外链都加就对了”，而是严格对应首屏 JS 或 CSS 中**立刻 fetch 或加载**的第三方域名：
-
https://fonts.googleapis.com（Google Fonts CSS 在<link rel="stylesheet">里同步加载） -
https://cdn.example.com（首屏用的<script src="https://cdn.example.com/app.js"></script>） -
https://api.example.com（React/Vue 初始化时useEffect(() => { fetch(...) })立即触发）
别加的情况：https://your-site.com（同源自动复用）、http://xxx（Chrome 直接忽略）、https://analytics.example.com（用户点击后才上报）。
crossorigin 属性漏写或写错，等于没写
浏览器把带 crossorigin 和不带的连接视为两个隔离池。你声明了 preconnect，但 fetch 用的是带凭据模式（credentials: 'include'），而 preconnect 没配对，连接就无法复用。
- ✅ 正确写法：
<link rel="preconnect" href="https://api.example.com" crossorigin>（空属性值，等价于crossorigin="anonymous"） - ❌ 错误写法：
crossorigin=""（HTML 规范不认）、crossorigin="anonymous"（部分解析器降级为 no-cors） - ⚠️ 特殊情况：若 fetch 显式传
credentials: 'include'，服务端必须返回Access-Control-Allow-Credentials: true，此时仍需保留crossorigin，但得确认 CORS 配置匹配
放错位置，浏览器根本不会执行
浏览器是流式解析 HTML 的，preconnect 必须出现在 最顶部，且要在第一个 <link rel="stylesheet">、<script></script> 或 <link rel="preload"> 之前。
- ✅ 正确顺序：
<meta charset>→<link rel="preconnect">→<title></title>→ 其他资源 - ❌ 放在
<title></title>后面、动态插入、或跟在字体 CSS 后面，大概率失效 - ⚠️ 风险：晚一行，连接可能来不及建立，首屏 fetch 就错过复用窗口，TTFB 延迟直接多出 300ms+
加太多反而拖慢页面
浏览器对同一域名的并发连接数有限制（通常 6 个），每个 preconnect 都会占用一个连接槽位。加了没用的，会挤占真正需要的连接。
- 单域名最多省掉 DNS + TCP + TLS，理论极限约 600ms；再多写几个
rel="preconnect"不会叠加提速 - 对已建立连接的域名（比如刚
preconnect过又马上preload同一域名），第二个preconnect是冗余的 - 优先级低于
preload，如果带宽紧张，preconnect建连可能被延迟，所以它必须和真正要发的请求靠得足够近（1 秒内）
最容易被忽略的点是：它不保证连接一定被复用，只提供复用的可能——关键在“请求是否紧随其后”和“服务端是否返回正确 CORS 头”。测不出收益时，先查 Network 面板里对应域名的 Initiator 是否为 preconnect，再看 TTFB 时间戳是否真的提前了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
