移动端网页 dns-prefetch 指令为何不生效？
dns-prefetch 指令仅对跨域域名解析有效，指向自身域名或同源资源时浏览器会忽略该提示。
指令生效范围与自身域名限制
dns-prefetch 的核心作用是提前解析跨域域名的 IP 地址。当浏览器解析到资源请求来自同源或自身域名时，该指令会失效。这是因为浏览器在解析页面时，自身域名的 IP 地址已经完成解析，再次提示解析属于重复操作。因此，在编写指令时必须确保 href 属性指向的域名与当前页面不在同一个源。如果指向自身域名，浏览器会直接忽略该提示，不会发起额外的 DNS 查询。
为了验证这一点，可以在移动端浏览器开发者工具的网络面板中查看 DNS 请求记录。如果页面加载时没有针对该域名的额外 DNS 请求，说明指令未生效。检查代码时，应确认 href 属性中的域名拼写正确，且与当前页面协议、主机名和端口完全一致。任何细微的差别都会导致浏览器将其视为跨域请求，从而触发解析行为。
同源资源与无效提示的判断
除了自身域名，指向同源的其他资源也会导致指令失效。例如，页面中引用了同域下的图片或脚本，此时使用 dns-prefetch 是多余的。浏览器在处理同源资源时，会优先使用已缓存的 DNS 记录，不会因为额外的提示而重新发起查询。这种情况下，指令的存在不仅没有性能提升，反而可能增加无效的解析尝试。
排查此类问题时，应对比页面中实际引用的资源域名与 dns-prefetch 指令中的域名。如果两者完全相同，说明指令无效。正确的做法是仅对第三方跨域资源（如字体、CDN、API 接口）使用该指令。对于同源资源，直接移除 dns-prefetch 标签，避免无效的解析请求。
指令放置位置与浏览器兼容性
dns-prefetch 指令必须放置在 HTML 的 head 元素中才能生效。如果将其放置在 body 或其他位置，浏览器可能无法识别该提示。此外，该指令是 HTML 特性，具有很高的容错性。不支持该特性的浏览器不会报错，只是无法获得性能提升。因此，在移动端开发中，可以放心使用该指令，不会导致页面结构崩溃。
为了确保指令生效，建议将 dns-prefetch 标签放在 head 的最前面，紧随 meta 标签之后。这样可以最大程度地利用页面加载前的空闲时间进行 DNS 解析。同时，可以结合 preconnect 指令使用，以进一步减少连接延迟。但需注意，如果页面需要连接多个第三方域名，应谨慎使用 preconnect，以免过度消耗资源。
跨域资源解析的验证方法
对于有效的跨域资源，可以通过网络请求记录验证 dns-prefetch 的效果。在移动端浏览器中，打开开发者工具并切换到网络面板，筛选 DNS 请求。如果页面加载后，针对第三方域名的 DNS 请求时间早于资源请求时间，说明指令生效。这表明浏览器在资源请求之前已经完成了 IP 地址的解析。
如果 DNS 请求时间与资源请求时间几乎同步，说明指令未生效。此时应检查 href 属性是否指向了正确的跨域域名，以及指令是否放置在 head 元素中。此外，还可以通过 HTTP 头部检查 Link 字段，确认服务器是否正确返回了 dns-prefetch 指令。如果头部未包含该指令，说明配置可能存在问题。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。