仅当确定几秒内必从某第三方域名加载关键资源时才加 rel="preconnect"，如首屏所需的 Google 字体、CDN 的 CSS/JS 或强依赖的 API；同源、HTTP 域名及旧版 Safari 不适用。
什么时候该加 rel="preconnect"
只在你**确定几秒内必从某第三方域名加载关键资源**时才加。比如页面首屏要渲染 Google 字体、CDN 上的 CSS/JS、或首屏就调用的 API 接口（如 https://api.example.com）。如果只是埋了个统计脚本、广告位、或用户滚动后才懒加载的图片，加了反而浪费连接数——浏览器并发连接上限通常是 6 个/域名，预连占坑却不用，会挤掉真实请求。
- 适用：字体服务（
https://fonts.googleapis.com）、静态资源 CDN（https://cdn.example.com）、首屏强依赖的 API 域名 - 不适用：同源地址（浏览器自动复用连接）、HTTP 协议域名（Chrome 直接拒绝 TLS 握手）、旧版 Safari（
crossorigin 属性到底要不要加
不是可选项，是**行为开关**：如果目标资源响应头含 Access-Control-Allow-Origin（比如字体、跨域图片、fetch 请求的 API），就必须加 crossorigin，否则浏览器会忽略这条 preconnect，甚至后续 fetch 报错 Failed to execute 'fetch' on 'Window': Request mode is 'no-cors'。
- 加
crossorigin：适用于字体、带 CORS 头的 API、CDN 上启用了跨域的资源 - 不加
crossorigin：适用于纯静态资源且无 CORS 要求的 CDN（极少见），或你确认资源本身不要求跨域凭证 - 错误写法：
crossorigin=""或crossorigin="anonymous"—— HTML 规范只接受空属性值，写成带等号会解析失败或被忽略
放在 HTML 里什么位置才生效
必须写在 里，且越靠前越好——理想位置是在所有 <link rel="stylesheet"> 和 <script></script> 之前。因为浏览器是流式解析 HTML 的，preconnect 提示得早，DNS/TCP/TLS 才能赶在真正发请求前完成。
- 有效位置：
<link rel="preconnect" href="https://fonts.googleapis.com"> - 无效位置：放在
里、或在<link rel="preload">之后、或被 JS 动态插入 - 别重复写：同一域名写多次，浏览器只执行第一次，其余被丢弃
和 dns-prefetch 混用要注意什么
dns-prefetch 只查 DNS，开销小、兼容性好（IE11 都支持）；preconnect 是完整握手，更快但也更重。两者可以共存，但顺序和用途要分清。
立即学习“前端免费学习笔记（深入）”；
- 先
dns-prefetch后preconnect：对尚未确认是否真会访问的域名（比如用户点击后才触发的分享接口），只做 DNS 预查；对确定高频使用的，再补preconnect - 别滥用组合：一个域名同时写
dns-prefetch和preconnect不会报错，但后者已包含前者能力，纯属冗余 - Safari 14.0 及更早版本不支持
preconnect，但会忽略它；dns-prefetch则能 fallback 保底
preconnect 却没验证 Network 面板里对应域名的连接时间是否下降，最后只是徒增 HTML 体积和连接池压力。 
