rel="preconnect"能省200–600ms TTFB，但仅对首屏1秒内真实请求的HTTPS第三方域名有效，须置于最顶部、带crossorigin属性、href为协议+域名，且数量不超过4个。
rel="preconnect" 能省下 200–600ms 的 TTFB，但只对「首屏立即 fetch 的 HTTPS 第三方域名」有效；写错位置、漏 crossorigin、加在同源域名上，全白搭。
哪些域名该加 rel="preconnect"？
只加页面加载后 1 秒内真实发起请求的第三方 HTTPS 域名：
-
https://api.example.com—— React/Vue 初始化时同步fetch()的接口 -
https://fonts.googleapis.com和https://fonts.gstatic.com—— 字体 CSS + 字体文件双预连 -
https://cdn.example.net—— 首屏 JS/CSS 明确从该 CDN 加载（如<link rel="stylesheet" href="https://cdn.example.net/main.css">）
别加这些：
-
http://域名 —— Chrome 直接忽略 -
https://your-site.com—— 同源连接自动复用，加了浪费连接数 -
https://analytics.example.com—— 用户点击后才上报，更适合rel="dns-prefetch"
crossorigin 必须写，且只能写对
不写或写错 crossorigin，浏览器会建一个“无凭据连接”，而你的 fetch() 默认走凭据模式，结果还是得重连。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
<link rel="preconnect" href="https://api.example.com" crossorigin>（空属性值，等价于anonymous） - ❌ 错误：
crossorigin=""（HTML 规范不认，被忽略） - ❌ 错误：
crossorigin="anonymous"（部分解析器报错或降级为 no-cors）
如果 fetch() 显式传了 credentials: 'include'，服务端必须返回 Access-Control-Allow-Credentials: true，此时仍要保留 crossorigin，但需确认 CORS 配置匹配。
必须放在
浏览器是流式解析 HTML 的。一旦遇到第一个 <link rel="stylesheet"> 或 <script></script>，预连接窗口就关闭了。
- ✅ 有效：
<link rel="preconnect" href="https://api.example.com" crossorigin> <link rel="stylesheet" href="/main.css"> - ❌ 无效：
<link rel="stylesheet" href="/main.css"> <link rel="preconnect" href="https://api.example.com">
别把它塞进 ，也别用 JS 动态插入（document.head.appendChild()），那已经太晚。
最多加 4 个，再多没用还拖慢主站
Chrome 对 preconnect 并发连接数限制为 6 个/域名，但还要给字体、CDN、API 分配，实际建议只留 3–4 个坑位。
- 同一主域下的子域（如
cdn1.example.com和cdn2.example.com）若共用 DNS，加一个就够了 - 别把所有子域都列一遍：
cdn1.、cdn2.、img.、js.……前两个可能建连成功，后两个直接被静默丢弃 - href 必须是完整 HTTPS 协议 + 域名，不能带路径：
https://cdn.example.com✅，https://cdn.example.com/js/app.js❌
真正容易被忽略的是：连接建完后必须在 1 秒内发起请求，否则浏览器可能回收它——不是写了就一定省时间，得卡准时机。
