移动端字体加载慢？检查 dns-prefetch 是否指向了同源域名
dns-prefetch 仅对跨域域名的 DNS 解析有效，指向自身域名无法提升性能。
为什么同源域名使用 dns-prefetch 无效
dns-prefetch 的作用是在资源请求前尝试解析域名。当浏览器请求同源资源时，该域名的 IP 地址在页面加载早期就已经被解析完成。此时再通过 dns-prefetch 提示去解析，无法获得任何延迟降低的效果。因此，如果将 dns-prefetch 指向自身站点，该提示会被浏览器忽略，不会产生任何性能收益。
该机制的设计初衷是为了处理第三方资源。例如，页面引用了 Google Fonts，浏览器需要先解析 fonts.googleapis.com 的 IP 地址才能发起请求。dns-prefetch 提前执行这一步骤，可以减少等待时间。但如果该域名与当前页面同源，解析过程早已在浏览器处理页面时完成，额外的提示便失去了意义。
如何检查 dns-prefetch 的域名配置
打开网页的源代码，在 head 标签区域查找 link 标签。确认是否存在 rel 属性值为 dns-prefetch 的元素。检查 href 属性中指定的域名是否与当前页面的域名相同。如果两者一致，说明该配置无效，需要将其删除或修改为第三方资源域名。
除了 HTML 标签方式，还可以检查 HTTP 响应头。在开发者工具的网络面板中查看响应头，寻找 Link 字段。如果其中包含 rel=dns-prefetch 且指向同源域名，同样属于无效配置。这种情况下，应移除该头信息，避免浏览器执行无意义的解析操作。
dns-prefetch 与 preconnect 的区别与选择
dns-prefetch 仅执行 DNS 解析，而 preconnect 会进一步建立 TCP 连接和 TLS 握手。如果资源来自跨域第三方，且对加载速度要求较高，应优先使用 preconnect。这能减少更多延迟，但需要确保浏览器支持该特性。对于不支持 preconnect 的旧版浏览器，dns-prefetch 仍能提供 DNS 解析的优化。
当页面需要连接多个第三方域名时，不应全部使用 preconnect。过多的连接建立会消耗资源，反而降低性能。最佳实践是仅对最关键的资源使用 preconnect，其他资源使用 dns-prefetch。这样可以兼顾性能优化与兼容性，确保在不同浏览器环境下都能获得部分收益。
跨域资源加载时的正确配置方法
对于跨域字体或脚本资源，应将 dns-prefetch 指向第三方域名。例如，使用 Google Fonts 时，应在 head 中添加 link 标签指向 fonts.googleapis.com。这能帮助浏览器提前解析域名，减少字体加载时的等待时间。配置后，可以通过开发者工具的 Network 面板观察 DNS 解析是否提前发生。
如果资源加载需要跨域通信，使用 preconnect 时应添加 crossorigin 属性。这确保浏览器在建立连接时正确处理跨域策略。例如，对于匿名加载的字体，配置 preconnect 时必须包含 crossorigin，否则浏览器可能仅执行 DNS 解析，无法建立完整的连接。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。