HTTP 资源提示与连接优化（preconnect、dns-prefetch 与验证）

---

title: HTTP 资源提示与连接优化（preconnect、dns-prefetch 与验证）

date: 2025-11-26

keywords:

• preconnect
• dns-prefetch
• 连接优化
• 资源提示
• 首屏

description: 使用preconnect与dns-prefetch提前建立连接与解析DNS，降低首屏关键路径延迟，提供服务端与客户端配置及验证方法。

categories:

• 文章资讯
• 技术教程

---

概述

preconnect可提前建立TLS与TCP连接，dns-prefetch可提前DNS解析。对关键第三方与静态资源域名使用资源提示，可减少首屏与关键请求延迟。

关键实践与参数

• preconnect：对关键域名使用 <link rel="preconnect" href="https://static.example.com" crossorigin>
• dns-prefetch：对非跨域资源使用 <link rel="dns-prefetch" href="//cdn.example.com">
• 观测指标：TTFB、FCP、LCP 与连接握手耗时
• 协同策略：与HTTP/3和Early Hints结合提升效果

示例/配置/实现

<link rel="preconnect" href="https://static.example.com" crossorigin>
<link rel="dns-prefetch" href="//cdn.example.com">

Link: <https://static.example.com>; rel=preconnect, <//cdn.example.com>; rel=dns-prefetch

验证

• 握手时延：观察TLS与TCP握手耗时下降
• 首屏指标：FCP/LCP改善在目标阈值内
• 兼容性：不同浏览器与网络下效果稳定
• 协同：与Early Hints一起使用进一步降低关键路径

注意事项

• 限定关键域名，避免过度预连接占用资源
• 跨域资源需crossorigin
• 与缓存策略协同，避免重复连接浪费
• 持续评估与调整提示列表