Resource Hints 预连接与 DNS 预解析：preconnect、dns-prefetch 与协同实践

背景与价值预连接减少 TCP/TLS 握手与 DNS 解析等待；对跨域字体、图片 CDN、API 域名尤为显著。基本用法<!-- DNS 预解析：低成本提示浏览器提前解析域名 --> <link rel="dns-prefetch" href="//cdn.example.com"> <!-- 预连接：建立到目标域的连接与 TLS 会话（可能消耗更多资源） --> <link rel="preconnect" href="https://cdn.example.com" crossorigin> <!-- 与 preload 协同：明确关键资源并提升优先级 --> <link rel="preload" as="image" href="/hero.jpg" fetchpriority="high"> 选择与治理对稳定使用的第三方域启用 `preconnect`；对不确定或偶发资源使用 `dns-prefetch`。控制数量：通常 1–3 个关键域即可；过多预连接会浪费带宽与连接槽位。指标验证（Chrome 128/Edge 130）首次跨域资源到达时间：降低 60–140ms。LCP（P95）：首页降低 80–200ms（与资源大小和 CDN 位置相关）。稳定性：在弱网下收益更明显（≥ 120ms）。风险与回退过度预热：无用连接造成带宽浪费；通过性能追踪与 A/B 校准域名单。不支持环境：浏览器忽略提示；主流程不受影响。测试清单域名单治理：根据请求日志与 RUM 指标挑选最常用域名。对比实验：关闭/开启预连接的 LCP 与到达时间差异显著且稳定。