preconnect不能直接加速CSS下载，仅提前完成DNS+TCP+TLS连接；需配合preload才能真正提前下载CSS，且必须正确添加crossorigin属性并置于head最顶部。
preconnect 能不能直接加速 CSS 下载
不能。preconnect本身不下载任何资源，只提前完成 DNS + TCP + TLS 三步连接。如果你的 CSS 是从跨域 CDN（比如 https://cdn.jsdelivr.net）加载的，preconnect能缩短后续 <link rel="stylesheet"> 发起请求时的 TTFB（首字节时间），但不会让 CSS 文件“更快开始下载”——那得靠 preload。
必须加 crossorigin 属性，否则白写
哪怕目标是 HTTPS、同协议，漏掉 crossorigin 就等于没写。浏览器会把带和不带该属性的连接视为两个池子，CSS 请求走的是带凭据/无凭据模式，而这个模式由你声明的 crossorigin 决定：
-
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>✅ 正确（空值等价于anonymous） -
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin="">❌ HTML 解析器忽略，连接建了也复用不上 -
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin="anonymous">⚠️ 部分解析器报错或降级，不推荐
如果 CSS 请求实际带凭证（比如用了 credentials: 'include'），服务端必须返回 Access-Control-Allow-Credentials: true，且仍需保留 crossorigin 属性 —— 但此时要确认 CORS 配置与请求模式匹配，否则预连接仍无效。
放在 <head> 最顶部，晚一行就可能失效
浏览器是流式解析 HTML 的。如果 preconnect 声明在第一个 <link rel="stylesheet"> 或 <script> 后面，解析器可能已经发起 CSS 请求，预连接来不及复用：
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确顺序：
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>→ 紧接着才是<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"> - ❌ 错误顺序：先写了
<link rel="stylesheet">，再补preconnect—— 大概率没收益
同一域名最多写一个 preconnect，重复写不会叠加提速，反而挤占浏览器并发连接数（通常限 6 个/域名）。
搭配 preload 才算完整优化链路
preconnect 只打通通道，真正让 CSS “提前下载”得靠 preload：
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin> <link rel="preload" as="style" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
注意三点：
-
preload的href必须和最终stylesheet的 URL 完全一致（协议、大小写、查询参数都不能差） -
preload不替代stylesheet，少了后者样式不会生效 -
preload有带宽抢占风险，只对首屏关键 CSS 用，别乱加非关键样式
最容易被忽略的是：预连接建好了，但 JS 在 2 秒后才发 fetch 请求，连接大概率已被回收；或者服务端没返回 Access-Control-Allow-Origin，加了也白加 —— 连接不是问题，复用才是关键。
