preconnect必须放在最顶部，写为，href仅限协议+域名，不可带路径或查询参数，且不支持动态插入。
preconnect 该加在哪儿、怎么写才生效
必须放在 最顶部，越早解析越好；浏览器一遇到就立刻开始 DNS + TCP + TLS 预连接，晚放几行就可能错过空闲时机。
基本写法只有两部分：rel="preconnect" 和 href，例如：
<link rel="preconnect" href="https://fonts.gstatic.com">
关键细节：
- 不要加
crossorigin=""这种写法——crossorigin是布尔属性，写成crossorigin或crossorigin="anonymous"都可以，但crossorigin=""是非法 HTML，会被忽略 - 只对跨域资源用，同源域名（比如你自己的
https://your-site.com）加了没效果，还白占并发名额 - href 值必须是完整协议+域名，不能带路径，比如
https://cdn.example.com✅，https://cdn.example.com/js/❌
什么时候必须加 crossorigin 属性
加 crossorigin 不是为了“兼容”，而是为了确保预连接能真正复用于后续资源请求。如果目标资源实际需要 CORS（比如字体、fetch 请求的 API、某些 CDN 上带凭证的 JS），但 preconnect 没带 crossorigin，浏览器会建一个“无凭据”的连接，后续带凭据的请求无法复用它，等于白连。
常见判断场景：
-
https://fonts.googleapis.com和https://fonts.gstatic.com：必须加crossorigin，Google Fonts 的字体文件走 CORS 加载 -
https://cdn.jsdelivr.net：通常不用，除非你明确用fetch()带credentials: 'include'请求它上面的资源 -
https://api.your-backend.com：如果你的前端用fetch()请求它且服务端设置了Access-Control-Allow-Origin: *或具体域名，加crossorigin="anonymous"更稳妥
加几个、加哪些域名才算合理
浏览器对 preconnect 有硬性并发限制（Chrome 当前是 6 个），且每个连接都消耗 CPU 和网络资源。加多了不仅没收益，反而拖慢页面。
只保留这三类：
- 你页面里 100% 会加载的第三方域名（比如 Google Fonts、CDN JS/CSS、核心分析脚本）
- 首屏渲染强依赖的 API 域名（如
https://api.example.com，且首页 JS 立即发起请求） - 字体、图标等跨域静态资源所在域名（如
https://use.fontawesome.com）
别碰这些：
- 广告、埋点备用域名（实际没加载就白连）
- 同一域名多次声明（
<link rel="preconnect" href="https://cdn.example.com">出现两次，后一次无效） - HTTP 域名（preconnect 对 HTTP 仅做 DNS 查询，意义极小；HTTPS 才能完成 TLS 协商）
怎么验证 preconnect 是否真的起作用
别只看 HTML 有没有写对，重点看 Network 面板里它是否被真正复用。
操作步骤：
- 打开 Chrome DevTools → Network 面板 → 刷新页面
- 筛选类型为
Other，找名字含preconnect的条目，点开看时间线：如果domainLookup、connectStart耗时明显低于后续同域名的真实请求（比如script.js），说明成功 - 右键某条真实资源（如字体文件）→ “Copy” → “Copy resource URL”，再在 Network 面板顶部搜索框粘贴该 URL，查看它的
connection ID是否和 preconnect 条目一致——一致代表复用成功
容易被忽略的一点：Lighthouse 的 “Preconnect to Required Origins” 审计项只提示“可加”，不保证你加了就一定生效；它不会校验 crossorigin 是否匹配、也不会检查你是否对未使用的域名滥加。真要确认效果，必须看 Network 时间线里的连接复用证据。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
