preconnect 可同时声明多个域名，但 chrome 限并发6个，建议控制在3–4个；需为不同子域分别声明，同源无需添加；crossorigin 必按 cors 需求添加，且必须置于 head 顶部；验证需通过 devtools network 面板确认连接提前建立与复用。
preconnect 能不能同时写多个域名
能，但浏览器硬性限制并发预连接数，Chrome 当前是 6 个，超出的会被静默丢弃或延迟建立，反而挤占主站连接资源。实际建议控制在 3–4 个以内，只留给真正首屏立即用的域名。
常见踩坑点：
- 把
a.example.com和b.example.com当作一个域名处理——它们无法共享连接，必须分别声明，但会各自占用一个名额 - 对同源域名（如
https://your-site.com）也加preconnect——浏览器自动复用连接，加了白耗资源 - 混用 HTTP 和 HTTPS 域名，比如
http://api.example.com——现代浏览器直接忽略，不报错也不生效
crossorigin 属性到底要不要加、怎么加
不是“可选”，而是“按需必加”。是否加 crossorigin，取决于后续真实请求是否走 CORS 模式。如果服务端返回了 Access-Control-Allow-Origin，而你没加 crossorigin，浏览器会建一个无凭据连接，fetch() 时仍要重连，等于白连。
实操判断逻辑：
- 字体（
fonts.gstatic.com、fonts.googleapis.com）→ 必须加crossorigin或crossorigin="anonymous" - API 接口（
api.example.com），且前端用fetch()并收到Access-Control-Allow-Origin: *→ 加crossorigin="anonymous" - 静态 JS/CSS CDN（
cdn.example.com），且不带凭证、不触发 CORS 预检 → 可不加，但为兼容 Safari 等旧版浏览器，统一加上更稳妥 -
crossorigin=""是非法写法，HTML 规范不认，会被完全忽略
preconnect 放错位置就彻底失效
它必须出现在 最顶部，早于第一个 <link rel="stylesheet">、<script></script> 或任何阻塞解析的标签。浏览器流式解析 HTML，一旦进入资源加载阶段，预连接窗口就关闭了。
正确顺序示例：
<link rel="preconnect" href="https://api.example.com" crossorigin><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link rel="stylesheet" href="/main.css"><script src="/app.js"></script>
错误写法包括：
- 放在
<link rel="stylesheet">后面 - 动态插入（
document.head.appendChild()）→ 完全不生效 - 写在
里 → 浏览器直接忽略
怎么验证 preconnect 是否真起作用
别只看代码写了没，得进 Chrome DevTools Network 面板确认行为。关键看三点：
- 筛选出
Connection Start时间线，对比未加preconnect时的连接建立耗时，应提前 200–600ms - 检查对应域名的首个资源请求（如字体、API）的
Initiator是否为parser，而不是script或other—— 表明连接被复用 - 在 Timing 标签页中，确认
Connect Start到Secure Connection阶段已压缩，而非从零开始
最容易被忽略的是：即使写了 preconnect，如果该域名在首屏 1 秒内没发起真实请求，连接会在空闲后关闭，优化就落空了。所以它只对「JS 初始化即 fetch」的 API 域名有效，对用户滚动后才加载的广告或推荐接口，不如改用 dns-prefetch。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
