能，preconnect 确实可提前建 tcp+tls 连接，但仅对跨域 https 域名有效，且必须满足三条件：href 为完整 https:// 协议+根域名、无路径参数、显式写 crossorigin（空属性值），缺一不可，否则浏览器直接忽略。
preconnect 真的能提前建 TCP 连接吗？
能，但只对跨域 HTTPS 域名有效，且必须满足三个硬性条件：协议完整（https://）、href 仅含域名（不能带路径或参数）、显式声明 crossorigin 属性。漏掉任一条件，Chrome/Firefox 就直接跳过，连 DNS 查询都不会发。
怎么写才真正触发 TCP+TLS 握手
浏览器不是看到 rel="preconnect" 就立刻开连，它只在流式解析 时处理，且只认静态、靠前、格式严格的写法：
-
<link rel="preconnect" href="https://api.example.com" crossorigin>✅ 正确：HTTPS + 根域名 + 空crossorigin属性 -
<link rel="preconnect" href="http://api.example.com">❌ HTTP 域名被 Chrome 完全忽略 -
<link rel="preconnect" href="https://api.example.com/v1/users">❌ 路径存在 → 解析失败，Network 面板里看不到任何记录 -
<link rel="preconnect" href="//cdn.example.com">❌ 协议相对路径，部分浏览器不识别或降级为无效 -
<link rel="preconnect" href="https://cdn.example.com" crossorigin="">❌crossorigin=""是非法语法，HTML 解析器会丢弃该属性
为什么加了 crossorigin 才能复用连接
浏览器把带 crossorigin 和不带的连接视为两个完全隔离的连接池。你后续用 fetch() 加载资源时，默认走 credentials: 'omit' 模式，对应的就是 crossorigin（即 crossorigin="anonymous"）预建的连接。不加，浏览器会建一个“无凭据”连接，但真实请求仍要重走 TLS 握手。
- 如果 JS 显式传了
credentials: 'include'，服务端必须返回Access-Control-Allow-Credentials: true，此时仍需保留crossorigin，但得确认 CORS 配置匹配 - 字体类资源（如
fonts.gstatic.com）几乎都要求 CORS，不加crossorigin就白连 - 同源地址（
https://your-site.com）加了也无效，浏览器自动复用现有连接
怎么验证 TCP 握手真被提前完成了
不能只看 HTML 有没有写，得进 Chrome DevTools 看实际行为：
- 打开 Network 面板 → 右键表头勾选
Connection ID和Protocol - 过滤 Initiator 列为
preconnect，确认有对应条目且状态是finished（不是queued或cancelled） - 找一个来自同一域名的真实资源（比如
font.woff2），展开 Timing，看Connection Start时间是否明显早于Request Start - 更底层验证：访问
chrome://net-internals/#events，搜索SSL_CLIENT_SOCKET事件，确认 preconnect 阶段已完成 TLS 握手
本地开发环境因证书或代理问题，preconnect 往往不生效，务必在真实 HTTPS 环境下测试；连接建完但 1 秒后才发起请求，也可能被浏览器回收——它只热身，不保活。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
