rel="preconnect" 和 rel="dns-prefetch" 都是用于优化网页加载性能的 HTML 链接属性，但它们的作用和适用场景有所不同：1. rel="preconnect"✅ 作用：提前建立与目标域名的连接（包括 DNS 解析、TCP 连接、TLS 握手等），为后续资源加载做准备。🎯 适用场景：当页面需要加载来自其他域的资源（如图片、脚本、字体、CSS 等）时。特别适合那些关

rel="preconnect" 和 rel="dns-prefetch" 是前端性能优化中常被忽视却极为实用的两个 HTML 预连接指令：前者通过提前完成 DNS 解析、TCP 连接和 TLS 握手，为即将加载的关键第三方资源（如字体、核心 JS/CSS 或 API）大幅削减网络延迟；后者则仅轻量预解析域名 DNS，兼容性极佳、开销极小，适合为用户可能后续访问但暂不触发请求的跨域链接做准备——合理搭配二者，能精准匹配“未来可能用”与“马上就要用”的不同场景，在不增加冗余负担的前提下显著提升首屏速度与用户体验。

两者都用来优化资源加载，但作用阶段和适用场景不同。

rel="dns-prefetch"：适合提前解析第三方域名

它只做 DNS 查询，不建立 TCP 连接，开销小、兼容性好（连 IE11 都支持）。适合那些你确定会访问、但暂时不会加载资源的第三方域名，比如 CDN 域名、统计脚本域名、广告或社交分享接口域名。

• 用在 中，例如：
• 特别适合跨域请求多、DNS 解析慢的地区（如某些运营商网络）
• 如果域名后续根本不会用到，纯属浪费；如果用了但没配 HTTPS，可能触发不安全警告（现代浏览器通常忽略）

rel="preconnect"：适合即将高频使用的关键第三方服务

它不仅查 DNS，还会完成 TCP 握手和 TLS 协商（如果是 HTTPS），代价更高，但收益也更直接。适合页面中明确要加载资源、且对首屏性能影响大的第三方源，比如字体托管服务（fonts.googleapis.com）、核心 API 域名、主 CDN。

• 同样写在 ，例如：
• 建议配合 crossorigin 属性使用（尤其涉及 CORS 资源时），避免预连接被浏览器忽略
• 不要滥用——每个 preconnect 都占用一个 HTTP/1.1 连接槽位，HTTP/2 下影响小些，但仍建议控制在 3–6 个以内

怎么选？看下一步动作

如果只是“将来可能会请求”，优先用 dns-prefetch；如果“接下来 1 秒内就要 fetch 字体、JS 或图片”，就该用 preconnect。实际项目中常组合使用：先 dns-prefetch 备着，再对最关键的 1–2 个源 preconnect。

不复杂但容易忽略。

今天关于《rel="preconnect" 和 rel="dns-prefetch" 都是用于优化网页加载性能的 HTML 链接属性，但它们的作用和适用场景有所不同：1. rel="preconnect"✅ 作用：提前建立与目标域名的连接（包括 DNS 解析、TCP 连接、TLS 握手等），为后续资源加载做准备。🎯 适用场景：当页面需要加载来自其他域的资源（如图片、脚本、字体、CSS 等）时。特别适合那些关键渲染路径上的外部资源，比如广告、第三方分析脚本、CDN 上的 JS/CSS 文件等。🧠 示例：🚀 效果：减少后续请求的等待时间，提升页面整体加载速度。2. rel="dns-prefetch"✅ 作用：仅预解析目标域名的 DNS，不建立实际连接。🎯 适用场景：当页面中包含指向其他域的链接（如 ），但这些链接可能不会立即被用户点击。或者页面中引用了**未来可能会用》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！