和前端性能优化有关的两个标签

<link rel="dns-prefetch"> 和 <link rel="preconnect"> 这两个标签都可以优化前端性能，它俩有什么区别呢？

浏览器获取资源时，需要把域名转换为 IP 地址，然后才会向服务器发起请求。把域名转换为 IP 的过程叫做 DNS 查询，它的时间会极大影响网页的打开速度。

<link rel="dns-prefetch"> 的作用比较简单，只是提前进行 DNS 查询，让浏览器能在后面的过程中更快获取资源。

<link rel="preconnect"> 的工作更多，不仅要把域名转换为 IP 地址，还要建立 TCP 连接，如果目标域名使用 HTTPS 协议，还需要进一步创建 TLS 加密通道。

有些资源（比如字体）在匿名模式下加载，此时需要在 preconnect 标签中增加 crossorigin 属性，否则浏览器仅执行 DNS 查询。

既然 preconnect 能够提前做更多的事情，为后续操作减少更多时间，那是不是使用越多越好呢？并不是这样的。如果使用 preconnect 过多，反而会导致浏览器性能下降。因此，建议仅为最重要的资源域名使用 preconnect 标签，其他第三方域名使用简单的 dns-prefetch 标签即可。

好钢用在刀刃上。

注意，这两个标签对页面当前域名无效。因为当浏览器开始解析文档内容时，当前域名早已解析和连接完毕。记住，它俩只对第三方域名有效。