preconnect不是加了就提速，必须满足HTTPS协议+完整域名、正确添加crossorigin属性、置于head最顶部且早于首个样式或脚本标签，否则浏览器直接忽略；数量建议控制在3–4个以内，仅限首屏1秒内必用的第三方域名。
preconnect 不是加了就提速，写错位置、漏 crossorigin、协议不全，浏览器直接当没看见。
href 必须是完整 HTTPS 协议 + 域名，不能带路径
浏览器只认 https:// 开头的绝对地址，且后面只能跟域名，多一个字符都失效。
- ✅ 正确：
<link rel="preconnect" href="https://cdn.example.com"> - ❌ 错误：
<link rel="preconnect" href="//cdn.example.com">（协议相对写法 → 降级为dns-prefetch） - ❌ 错误：
<link rel="preconnect" href="https://cdn.example.com/js/app.js">（含路径 → 整个标签被忽略） - ❌ 错误：
<link rel="preconnect" href="http://api.example.com">（HTTP → Chrome 直接跳过）
crossorigin 属性不是可选，而是复用开关
只要后续请求走 CORS（比如 fetch() 加了凭据、Google Fonts 字体、带 Access-Control-Allow-Origin 的 API），preconnect 就必须带 crossorigin，否则建的连接根本不会被复用。
- ✅ 正确写法：
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>（空属性值，等价于crossorigin="anonymous"） - ❌ 错误写法：
crossorigin=""（HTML 规范不认，被完全忽略） - ❌ 错误写法：
crossorigin="anonymous"（带等号，部分解析器报错或降级） - ⚠️ 特殊情况：如果
fetch()显式传了credentials: 'include'，服务端必须返回Access-Control-Allow-Credentials: true，此时仍要保留crossorigin，但不能依赖anonymous模式
必须放在 最顶部，晚一行就失效
浏览器流式解析 HTML，preconnect 标签必须出现在第一个 <link rel="stylesheet">、<script> 或 <link rel="preload"> 之前，否则连接窗口已关闭。
立即学习“前端免费学习笔记（深入）”；
- ✅ 有效顺序：
<head><link rel="preconnect" href="https://api.example.com" crossorigin><link rel="stylesheet" href="/main.css"></head> - ❌ 无效顺序：
<head><link rel="stylesheet" href="/main.css"><link rel="preconnect" href="https://api.example.com"></head> - ❌ 动态插入：
document.head.appendChild()→ 完全不生效 - ❌ 放在
<body>里 → 浏览器直接忽略
别贪多，3～4 个就够，再多白写还拖慢页面
Chrome 对 preconnect 并发数硬限 6 个，但还要留给字体、CDN、API 等资源。写太多不仅挤占主站连接槽位，还可能让真实请求排队。
- 优先保首屏立即用的域名：比如
https://api.example.com（初始化 fetch）、https://fonts.gstatic.com（字体）、https://cdn.example.com（首屏 CSS/JS） - 同主域子域（如
cdn1.example.com和cdn2.example.com）若共用 DNS，只加一个根域名https://example.com更高效 - 别为重定向目标域名 preconnect（比如你写
api.v1.example.com，但它 301 到api.v2.example.com，预连接就白做了） - 别给用户点击后才触发的域名加（比如统计、分享按钮）→ 改用
dns-prefetch
最常被忽略的是：本地开发环境因证书或代理问题，preconnect 往往不生效；必须在真实 HTTPS 环境下，用 Chrome DevTools → Network → Timing 面板确认 DNS/TCP/TLS 时间是否压缩，Connection ID 是否复用，才能判断它到底有没有跑起来。
