preconnect 是浏览器提前完成 dns 解析、tcp 握手和 tls 协商的资源提示，仅对跨域 https 域名有效，需写在 顶部、带完整协议域名及 crossorigin 属性，不下载资源，只为后续请求节省 100–600ms 连接延迟。
preconnect 是什么，它真能提前建 TCP 连接？
rel="preconnect" 不是“预先建立 Socket 握手连接”的完整说法，但它确实会让浏览器在解析 HTML 时，提前发起 DNS 查询、TCP 握手，甚至 TLS 协商（对 HTTPS 资源）。前提是目标域名尚未被访问过，且浏览器支持该提示（Chrome、Edge、Firefox 支持，Safari 仅部分支持，且需 crossorigin 才生效）。
它不下载资源，也不触发任何后续请求，只做连接准备。所以别指望它“预加载图片”或“预取 JS”，那是 rel="preload" 或 rel="prefetch" 的事。
怎么写才真正触发 preconnect？
必须满足三个条件：协议+域名明确、href 指向根路径、带 crossorigin（即使资源本身不需要 CORS）——尤其对 CDN 或第三方服务，漏掉 crossorigin 在 Chrome/Firefox 中会直接忽略该提示。
-
<link rel="preconnect" href="https://cdn.example.com" crossorigin>✅ 正确（HTTPS + 根域名 + crossorigin） -
<link rel="preconnect" href="http://api.example.com">❌ HTTP 域名在现代浏览器中基本被无视 -
<link rel="preconnect" href="https://cdn.example.com/fonts/">❌ 路径不能带子路径，只接受协议+域名（可选端口） -
<link rel="preconnect" href="https://cdn.example.com" crossorigin="anonymous">✅ 等价于crossorigin，但更冗余
什么时候用 preconnect？哪些域名值得加？
只对高频、关键、跨域的第三方资源有效。比如你页面里大量用到 https://fonts.googleapis.com、https://apis.google.com、CDN 域名或埋点 SDK 域名。同一域名重复声明无意义，浏览器只执行一次；但多个不同域名可以并行预连。
别乱加：rel="preconnect" 会占用浏览器并发连接数（通常上限 6），如果预连了不用的域名，反而挤占真实资源的连接机会。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 适合加：字体服务、分析 SDK、广告平台、核心 API 域名（如
https://api.yoursite.com） - 不适合加：用户头像 CDN（域名多且不可预测）、未启用 HTTPS 的旧服务、内网地址（
http://192.168.x.x） - 注意：若主站和 CDN 同域（如都走
https://example.com），无需 preconnect —— 浏览器已复用主连接
怎么验证 preconnect 是否生效？
打开 Chrome DevTools → Network 面板 → 刷新页面 → 点击任意请求 → 查看 Timing 标签页。如果某域名的请求显示 “Connection Start” 时间极早（甚至早于 HTML 解析完成），且前面有绿色的 “DNS Lookup” / “Initial connection” 阶段，说明 preconnect 起效。
更直接的方法是过滤 Network 请求，搜索 preconnect，能看到类型为 other 的条目，Status 显示 (finished)，Timing 里有完整握手耗时。
注意一个常见误判：看到 DNS 查询快 ≠ preconnect 生效 —— 浏览器本身也会做 DNS 预获取（dns-prefetch），而 preconnect 是更激进的一步，必须看到 Initial connection 阶段才算。
容易被忽略的是：preconnect 的效果高度依赖网络环境和浏览器实现细节，本地开发环境因缓存/代理干扰，往往不如线上稳定；上线后建议用 WebPageTest 抓取真实 Waterfall 图确认。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
