HTML文档中Link标签预连接（Preconnect）对第三方资源加载的提速-html教程-PHP中文网

rel="preconnect"对首屏立即fetch的https第三方api或cdn域名可减少200–600ms ttfb，前提是置于顶部、带crossorigin属性、服务端返回cors头且请求在1秒内发起。

html文档中link标签预连接（preconnect）对第三方资源加载的提速

rel="preconnect"到底能省多少时间

对首屏立即 fetch 的 HTTPS 第三方 API 或 CDN 域名，rel="preconnect" 能实打实减少 200–600ms 的 TTFB（首字节时间），但前提是它真被浏览器复用了。这个收益集中在弱网、高延迟地区或移动端更明显；在本地开发环境或高速光纤下几乎测不出来。

关键不是“有没有连”，而是“连完能不能用上”：如果 JS 在 preconnect 后 2 秒才发请求，连接可能已被浏览器回收；如果服务端没返回 Access-Control-Allow-Origin，加了也白加。

典型有效场景：https://fonts.googleapis.com（字体 CSS）、https://cdn.example.com（首屏 JS/CSS）、https://api.example.com（React/Vue 初始化时同步 fetch）
无效场景：http:// 域名（Chrome 直接忽略）、https://your-site.com（同源自动复用）、https://analytics.example.com（用户点击后才上报）
收益上限：单域名最多省掉 DNS + TCP + TLS 三步，理论极限约 600ms；再多写几个 rel="preconnect" 不会叠加提速，反而挤占浏览器并发连接数（通常限 6 个/域名）

crossorigin 属性为什么必须写、怎么写才对

crossorigin 不是可选项，是行为开关。漏写、写错值，会导致预连接建了也白建——浏览器内部把带和不带 crossorigin 的连接视为两个完全隔离的连接池。

真实 fetch 请求走的是带凭据（credentials: 'include'）还是无凭据（credentials: 'omit'）模式，决定了它能否复用 preconnect 建好的连接。而这个模式由你声明的 crossorigin 属性决定：

✅ 正确写法：<link rel="preconnect" href="https://api.example.com" crossorigin>（空属性值，等价于 crossorigin="anonymous"）
❌ 错误写法：crossorigin=""（HTML 规范不认这个语法，会被忽略）、crossorigin="anonymous"（带等号，部分解析器报错或降级为 no-cors）
⚠️ 特殊情况：如果你的 fetch() 显式传了 credentials: 'include'，服务端必须返回 Access-Control-Allow-Credentials: true，此时仍要保留 crossorigin 属性，但不能依赖 anonymous 模式——得确认服务端 CORS 配置匹配

放在 HTML 里什么位置才算生效

rel="preconnect" 必须出现在最顶部，且要在第一个 <link rel="stylesheet">、<script></script> 或 <link rel="preload"> 之前。晚一行，就可能失效。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

原因：浏览器是流式解析 HTML 的。只有在解析器刚进入、还没开始下载任何外部资源时，它才有空闲连接窗口去执行 preconnect。一旦解析到一个 src 或 href，加载流程就启动了，后续的 preconnect 提示会被丢弃。

✅ 有效位置：<link rel="preconnect" href="https://cdn.example.com" crossorigin> <link rel="stylesheet" href="/main.css">
❌ 无效位置：<link rel="stylesheet" href="/main.css"> <link rel="preconnect" href="https://cdn.example.com" crossorigin>
? 完全无效：document.head.appendChild() 动态插入、里写、模板字符串中拼接后注入

怎么验证 preconnect 真的起作用了

别只看代码写了没。打开 Chrome DevTools → Network 面板 → 切换到 Timing 标签页，找一个来自目标域名的资源（比如 font.woff2 或 app.js），展开它的 Timing，重点看两点：

“Connection Start” 时间是否明显早于 “Request Start”（至少提前 100ms 以上）
Initiator 列是否显示为 preconnect（不是 parser 或 script）
该资源的 Priority 是否为 Highest 或 High（说明连接已就绪并被复用）

更直接的方式：在 Network 面板过滤 Initiator: preconnect，确认有对应请求；再过滤目标域名（如 cdn.example.com），看其他资源是否复用了这条连接。如果只看到 preconnect 请求，但后续资源仍是 Initial connection，基本可以断定 crossorigin 写错了，或者服务端 CORS 头缺失。

容易被忽略的一点：同一域名多次声明 rel="preconnect"，浏览器只执行第一次，其余全部丢弃——检查你的模板、组件、构建产物里有没有重复注入。