HTTP 请求之性能优化：DNS预解析 dns-prefetch

小咪咪 2023-03-01 06:20 24阅读 0赞

# HTTP 请求之性能优化：DNS预解析 dns-prefetch #

当浏览器从第三方服务跨域请求资源的时候，在浏览器发起请求之前，这个第三方的跨域域名需要被解析为一个IP地址，这个过程就是DNS解析，DNS缓存可以用来减少这个过程的耗时，DNS解析可能会增加请求的延迟，对于那些需要请求许多第三方的资源的网站而言，DNS解析的耗时延迟可能会大大降低网页加载性能。

dns-prefetch可帮助开发人员处理DNS解析延迟问题。 [HTML <link>][HTML _link]元素通过dns-prefetch的rel属性值提供此功能。然后在href属性中指定跨域域名：

每当站点引用跨域域上的资源时，都应在[<head>元素][head]中放置dns-prefetch提示，但是要记住一些注意事项。首先，dns-prefetch仅对跨域域上的DNS查找有效，因此请避免将其用于您当前访问的站点。这是因为当浏览器解析到当前Link元素内容时，您站点域背后的IP已经被解析。

其次，还可以将dns-prefetch（和其他资源提示）指定为HTTP标头：

Link: <https://fonts.googleapis.com/>; rel=dns-prefetch

第三，考虑将dns-prefetch与`preconnect`结合。尽管dns-prefetch仅执行DNS查找，但preconnect会建立与服务器的连接。如果站点是通过HTTPS服务的，则此过程包括DNS解析，建立TCP连接以及执行TLS握手。将两者结合起来可提供机会，进一步减少跨源请求的感知延迟。您可以安全地将它们一起使用，如下所示：

之所以把dns-prefetch放在preconnect之后，是因为浏览器对dns-prefetch的支持比对`preconnect`的支持要好。不支持`preconnect`的浏览器仍然可以通过回退到dns-prefetch来获得更多好处。

由于HTML的一些兼容功能，因此容错性很好。如果不支持的浏览器遇到dns-prefetch提示（或任何其他资源提示），您的网站依旧不会中断。您只是不会获得它提供的好处。

# #

## See also ##

*  [HTTP headers][]
 *  [<link>][link]

[HTML _link]: https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/link
[head]: https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/head
[HTTP headers]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers
[link]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link