dns-prefetch 仅对跨域域名有效为何不能用于自身

为何不能对自身域名使用 dns-prefetch

dns-prefetch 的作用是尝试在资源请求之前解析域名。当浏览器请求自身域名的资源时，IP 地址已经在页面加载开始时被解析。因此，当浏览器看到指向自身域名的 dns-prefetch 提示时，该域名对应的 IP 已经存在，无法再次执行解析操作。

根据最佳实践，应避免使用 dns-prefetch 指向自身或同站点的域名。这是因为浏览器在处理页面时，自身域名的解析过程已经完成，此时再添加提示不会产生任何延迟减少的效果。如果必须对自身域名进行优化，应考虑使用其他资源提示。

dns-prefetch 仅执行 DNS 查找，而 preconnect 则会建立与服务器的连接。preconnect 的过程包括 DNS 解析、建立 TCP 连接以及执行 TLS 握手（如果网站使用 HTTPS）。使用 preconnect 可以进一步减少跨域请求的感知延迟。

如果页面需要连接多个第三方域名，同时预连接所有域名可能会产生反作用。preconnect 提示应仅用于最关键的连接。对于其他连接，只需使用 dns-prefetch 来节省第一步的时间，即 DNS 查找。这种组合策略是因为 dns-prefetch 的支持度优于 preconnect。

除了在 HTML 中使用 link 元素，还可以通过 HTTP 头部设置资源提示。使用 HTTP Link 字段可以指定 dns-prefetch 或 preconnect。例如，可以在响应头中添加 Link 字段来指示浏览器提前解析特定域名的 DNS。

对于匿名加载的资源，如字体，应在 preconnect 提示中设置 crossorigin 属性。如果省略此属性，浏览器将仅执行 DNS 查找。这是因为某些资源在匿名模式下加载，需要额外的跨域设置才能建立完整的连接。

要验证 dns-prefetch 是否生效，可以在浏览器开发者工具的网络面板中查看 DNS 请求。如果提示指向跨域域名，且在资源请求之前出现了 DNS 查找记录，则说明提示生效。如果指向自身域名，则不会看到额外的 DNS 查找。

由于 dns-prefetch 是 HTML 特性，它具有很高的容错性。如果浏览器不支持该提示，页面不会出现错误，只是无法获得其带来的性能提升。这种设计确保了在不支持该特性的旧浏览器中，网站的功能依然正常。