CSS预连接优化：减少DNS与TCP延迟技巧

本文深入解析了CSS预连接（preconnect）这一关键性能优化技术，强调它并非作用于CSS文件路径本身，而是针对其所在域名（如CDN或字体服务）提前建立DNS查询与TCP连接，从而显著减少首屏资源加载延迟；文章明确指出preconnect必须置于HTML头部、仅支持完整协议+域名格式、需为跨域CORS资源（如Google Fonts）添加crossorigin属性，并建议严格控制在3–6个高优先级域名内——既避免浪费连接槽位，又防止挤占真实请求资源，真正实现“用则连、不用不连”的精准优化。

preconnect 不是给 CSS 文件本身加的，而是给它所在的域名加的。如果你用 link 引入的是 CDN 上的 CSS（比如 https://cdn.example.com/style.css），那真正要预连接的是 https://cdn.example.com 这个源，不是 CSS 路径本身。

为什么 preconnect 必须写在 里且不能带路径

浏览器只在解析 HTML 的早期阶段才处理 preconnect 提示，晚了就失去意义。它只接受完整协议 + 域名（如 https://fonts.googleapis.com），不支持路径（https://cdn.example.com/css/）或省略协议（//cdn.example.com）——后者会被忽略或触发降级为 dns-prefetch。

• 错误写法：（协议缺失，部分浏览器不识别）
• 错误写法：（含路径，浏览器直接忽略）
• 正确写法：

什么时候必须加 crossorigin

如果目标域名上的 CSS（或字体、JS）会触发 CORS 请求（比如你用 @font-face 加载跨域字体，或通过 fetch() 读取该域名资源），就必须加 crossorigin 属性，否则预连接可能白做——浏览器不会复用未标记 CORS 的连接来加载需要凭证的资源。

• 需要加：（Google Fonts 字体资源需 CORS）
• 可不加：（纯静态 CSS，无 JS/fetch 交互）
• crossorigin 值可以是空字符串或 "anonymous"，二者等效；不要写成 crossorigin="" 或 crossorigin="true"，后者非法

加几个合适？别超浏览器并发上限

Chrome 最多维持 6 个空闲 preconnect 连接，每个都占一个槽位。加太多不仅没收益，还可能挤掉真实请求的连接机会，尤其在弱网下更明显。

• 只对首屏必现的关键第三方源加：CDN 域名、字体服务（fonts.googleapis.com / fonts.gstatic.com）、核心 API 域名
• 避免对分析脚本、广告、埋点等低优先级域名使用 preconnect
• 同一域名重复声明会被忽略，但没必要写两遍
• 如果域名同时用 HTTP 和 HTTPS，只写 HTTPS 版本（HTTP 已基本淘汰）

最容易被忽略的一点：preconnect 不等于“越早加越多越好”。它只对明确会在几秒内发起请求的域名有效；如果页面后续根本没从该域名加载任何资源，这个连接会在约 10 秒后被浏览器主动关闭，纯属浪费。所以每次加之前，先确认那个域名下的资源是否真被用了、且用得早。

终于介绍完啦！小伙伴们，这篇关于《CSS预连接优化：减少DNS与TCP延迟技巧》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！