可提前建立跨域域名的 dns、tcp 和 tls 连接以降低延迟；需按 cors 需求决定是否添加 crossorigin 属性，仅对关键第三方域名使用，并可配合 dns-prefetch 和 preload 优化。
提升跨域资源速度">
使用 <link rel="preconnect"> 可以提前建立与跨域资源所在域名的 TCP 连接、TLS 握手（如 HTTPS）和 DNS 查询，从而减少后续请求的真实加载延迟。但要注意：crossorigin 属性不是 preconnect 的合法值，不能写成 crossorigin="" —— 这会导致 HTML 解析错误或被浏览器忽略。
正确写法：rel="preconnect" + crossorigin（仅当需要 CORS 时）
如果目标域名资源（如字体、脚本、图片）需要跨域请求且涉及 CORS（例如通过 fetch() 加载或 Web Font），则必须加上 crossorigin 属性（可为空字符串或 "anonymous"），否则预连接可能失败或不生效：
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin><link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin="anonymous">
若目标资源**不涉及 CORS**（比如纯静态图片、公开 CDN 上的 JS/CSS 且你确认服务端未强制校验 Origin），可省略 crossorigin：
<link rel="preconnect" href="https://example-cdn.com">
只对关键第三方域名使用，避免滥用
浏览器对 preconnect 有并发限制（通常 6 个左右），且每个 preconnect 会占用资源。应只针对真正会在页面中加载的、高优先级的跨域源使用：
立即学习“前端免费学习笔记（深入）”；
- 常见目标：CDN 域名（
cdn.jsdelivr.net）、字体服务（fonts.googleapis.com,fonts.gstatic.com）、分析脚本（www.google-analytics.com） - 不要为未使用的域名或低优先级资源添加（如广告、埋点备用域名）
- 避免对同一域名多次声明（重复无效）
配合 dns-prefetch 和 preload 使用更稳妥
preconnect 开销较大，适合确定要加载且支持 HTTPS 的域名；对仅需 DNS 查询的场景，可用更轻量的 dns-prefetch：
-
<link rel="dns-prefetch" href="https://api.example.com">（仅解析 DNS） -
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>（已知将加载字体，需完整连接） - 对关键资源（如首屏字体、核心 JS），再叠加
<link rel="preload">确保尽早获取
验证是否生效
在 Chrome DevTools 的 Network 面板中，筛选 Other 类型，查找 domainlookup、connectStart 等时间线。若看到 preconnect 条目且耗时显著低于后续实际请求，说明成功。也可在 Application → Frames → Frame → Manifest 中查看预连接状态（部分版本支持）。
