preconnect 与 dns-prefetch：把握手提前做掉

第三方域名的第一次请求要付完整的 DNS + TCP + TLS 代价。资源提示能把这些提前到页面解析阶段。

5 分钟协议与压缩
preconnect 与 dns-prefetch：把握手提前做掉

要点

preconnect 完成 DNS、TCP 与 TLS；dns-prefetch 只做 DNS 但成本极低。关键的第三方域名用前者，且不要超过几个。

本文目录
  1. 01两种提示的区别
  2. 02不要滥用
  3. 03更根本的做法

两种提示的区别

提示完成的阶段成本适用
dns-prefetch仅 DNS 解析极低可能用到的域名，可以多写几个
preconnectDNS + TCP + TLS占用连接资源确定会用到的关键域名
<link rel="preconnect" href="https://cdn.example.com" crossorigin>
<link rel="dns-prefetch" href="https://analytics.example.com">

crossorigin 属性对字体等匿名跨域请求是必须的——没有它，浏览器建立的连接与实际请求所需的连接不匹配，等于白建一次。

不要滥用

preconnect 是有代价的

每个 preconnect 都会占用一个连接和一次握手的资源。对十几个域名做 preconnect 会挤占真正关键资源的带宽和连接数，反而更慢。通常控制在两三个最关键的域名。

另外，浏览器会在一段时间后关闭未使用的预建连接。如果 preconnect 的域名在页面很晚才用到，连接可能已经被回收，提示就白费了。

更根本的做法

  • 减少第三方域名的数量——每个域名都是一套完整的建连成本；
  • 把关键资源放在主域名下（同源，复用已有连接），而不是靠 preconnect 补救；
  • 字体这类阻塞渲染的资源，优先自托管；
  • 只对首屏必需的域名用 preconnect，其余用 dns-prefetch。

在你的网站验证

边缘核验实测各域名的建连耗时，找出值得 preconnect 的那个