应在外链第三方资源确定会立即使用且跨域时用rel="preconnect"，它预建dns、tcp及tls连接；优先用于关键cdn、字体、监控域名，限3–4个，需置于head中并带完整href，cors资源须加crossorigin属性。
什么时候该用 rel="preconnect"
当页面要加载的第三方资源（比如 CDN 域名、字体服务、分析脚本）和当前页面不在同一个域名下，且你确定后续一定会用到它时，rel="preconnect" 才有意义。如果只是“可能用”，或者资源加载被 JS 动态控制且时机不确定，加了反而浪费 DNS/TCP 连接资源。
常见适用场景：
• 页面顶部引入 Google Fonts 的 https://fonts.googleapis.com 和 https://fonts.gstatic.com
• 使用 Sentry、Plausible 等外链监控 SDK 前预连其上报域名
• 电商页提前连接图片 CDN（如 https://cdn.example.net）
preconnect 和 dns-prefetch 到底选哪个
preconnect 比 dns-prefetch 更激进：它不仅做 DNS 查询，还会完成 TCP 握手，甚至 TLS 协商（HTTPS 下）。但代价是开销更大，且浏览器对并发 preconnect 数量有限制（通常 ≤6 个）。
所以：
• 优先给「确定会立即请求」的关键第三方域名用 preconnect
• 对低优先级或备用域名（比如 fallback CDN），改用 dns-prefetch
• 不要对同域资源使用 preconnect——浏览器已内置优化，加了没效果还占名额
怎么写才不白加、不报错
必须满足两个硬条件，否则浏览器直接忽略：
• 只能出现在 中（ 里无效）
• 必须带 href 属性，且值为完整协议+域名（不能是相对路径或只写 host）
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
正确写法示例：<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link rel="preconnect" href="https://cdn.example.net">
注意：
• 如果目标资源需要 CORS（比如字体、fetch 请求），必须加 crossorigin 属性，否则预连接会被降级为 dns-prefetch
• 不要滥用多个子域名（如 a.example.com、b.example.com），它们无法共享连接，且容易超限
• Chrome DevTools 的 Network → Timing 标签页里，能看到 preconnect 是否生效（查 “Connection Start” 时间是否提前）
为什么有时候加了反而变慢
预连接不是银弹。以下情况它会拖后腿：
• 在低端设备或弱网下，提前建立多个 HTTPS 连接会抢占系统 socket 和 TLS 资源
• 和真实资源请求时间差太远（比如首屏完全不需要，等到用户滚动到底部才加载的广告域名）
• 同时写了太多 preconnect，触发浏览器内部淘汰机制，把真正关键的那个挤掉了
建议做法：
• 用 Lighthouse 或 WebPageTest 测前后 TTFB / FCP 差异，别凭感觉加
• 把 preconnect 控制在 3–4 个以内，优先保最重的 1–2 个
• 如果项目用 HTTP/2 或 HTTP/3，且主站和资源在同一个域名（或支持域名分片），预连接收益大幅下降，不如专注减少请求数
真正难的是判断“要不要连”和“连谁”，而不是怎么写那行 tag。多数性能问题出在过早预连、连了不用、或连错了协议（比如写成 http:// 却实际跳转 https://）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
