dns-prefetch 与 preconnect 是 HTML5 中新增的两个属性，可用于加快与不同域名对应的服务器建立连接，优化前端性能。
dns-prefetch
使用方法如下：
<head>
<link rel="dns-prefetch" href="//example.com">
</head>
用于指示浏览器提前对该域名进行解析，这使得在真正获取域名下的资源时能够直接与对应的 ip 地址建立连接，从而提升网络性能。
preconnect
使用方法如下：
<head>
<link rel="preconnect" href="//example.com">
</head>
用于指示浏览器提前对该域名进行解析并建立连接，这使得在真正获取域名下的资源时能够直接使用已经建立的连接，进一步提升网络性能。
结语
两者都仅对跨域域名有效（同域在打开网页时就已经处理过了，没有意义），dns-prefetch 比 preconnect 的兼容性更好一些，因此可以一起使用，实现优雅降级。
不宜过度使用，因为域名解析与建立连接也是需要时间的。