preconnect 必须在 <head> 顶部、所有 <link rel="stylesheet"> 之前声明，且 href 仅含协议+域名；需匹配 CORS 策略，数量不超过6个，仅用于首屏确定加载的第三方域名。

preconnect 能提前建立 CSS CDN 的 Socket 连接，但前提是它必须出现在 <link rel="stylesheet"> 之前、且域名与协议完全匹配；否则浏览器直接忽略，不建连也不报错。

preconnect 必须写在 <head> 最顶部，且早于所有 <link rel="stylesheet">

浏览器只在解析 <head> 的流式过程中处理 preconnect。一旦遇到第一个 <link rel="stylesheet"> 或 <script>，后续的 preconnect 就可能错过空闲连接窗口——不是延迟生效，是彻底被跳过。

• ✅ 正确顺序：<link rel="preconnect" href="https://cdn.jsdelivr.net"> → <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
• ❌ 错误顺序：<link rel="stylesheet" ...> → <link rel="preconnect" ...>（无效）
• ⚠️ 放在 <body> 里、或用 JS 动态插入，也完全不生效

href 值只能是协议 + 域名，不能带路径或参数

preconnect 的目标是“建连”，不是“请求资源”。浏览器会把带路径的 href 当作非法值处理，Network 面板里看不到对应连接记录，也不会报错。

• ✅ 正确：https://fonts.googleapis.com、https://cdn.example.com
• ❌ 错误：https://cdn.example.com/css/main.css（含路径）、http://fonts.googleapis.com（HTTP 被 Chrome 忽略）、cdn.example.com（缺协议，被当相对路径）
• ⚠️ 同源地址如 https://your-site.com 加了也无意义，浏览器直接跳过

要不要加 crossorigin？取决于 CSS 文件是否实际需要 CORS

crossorigin 不是可选项，而是行为开关：它决定预建的 TLS 连接能否被后续真实请求复用。不匹配就会导致连接被丢弃，真实请求仍要重连。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

立即学习“前端免费学习笔记（深入）”；

• ✅ 必须加：<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>（Google Fonts 返回 Access-Control-Allow-Origin: *）
• ✅ 可不加：<link rel="preconnect" href="https://cdn.jsdelivr.net">（静态资源无 CORS 要求，且你没用 credentials: 'include'）
• ❌ 错误写法：crossorigin=""（空值会被当作 anonymous，可能不匹配凭据策略）

别超过 6 个，优先首屏 100% 确定会加载的域名

每个 preconnect 占用一个浏览器空闲 TCP 连接槽位。Chrome 默认单域名最多 6 个并发连接，加太多会挤占真实资源下载通道，反而拖慢首屏。

• ✅ 推荐数量：3–6 个以内，只覆盖 <link rel="stylesheet"> 中真正出现的第三方域名（比如 fonts.googleapis.com 和 fonts.gstatic.com 必须成对）
• ❌ 不该加：广告、统计、分享按钮等非首屏强依赖域名（用户未必触发）
• ⚠️ 同一域名重复声明（如两次 preconnect 到 cdn.example.com），后一次直接被丢弃

最容易被忽略的一点：preconnect 不下载资源，也不触发 CSS 解析——它只是让「连接」这件事提前发生。如果真实请求隔了几秒才来，或者设备本身 socket 资源紧张（比如低端安卓机），预建的连接可能已被回收。所以它只对几秒内必发的请求有效，不是加了就一定快。