DNS 预取（DNS Prefetching） 基础概念：什么是DNS预取？ DNS预取是一种网络性能优化技术，由Web浏览器实现。它的核心思想是： 在用户真正点击一个链接之前，浏览器就提前解析该链接所在域名对应的IP地址。 我们知道，当浏览器需要加载一个新网页时，第一步就是进行DNS查询，将域名（如 www.example.com ）转换为IP地址。这个过程通常需要几十到几百毫秒。DNS预取旨在消除这个等待时间。 工作原理与触发时机 这个“提前”操作发生在后台，不会干扰当前页面的加载和渲染。其典型工作流程如下： 发现潜在链接： 浏览器在解析当前页面的HTML时，会识别出页面中所有超链接（ <a> 标签）的 href 属性。 预取决策： 浏览器会根据一定的启发式规则（如链接是否在当前视口内、用户鼠标是否悬停等）判断哪些链接是用户接下来很可能点击的“高价值”链接。 执行预解析： 对于这些高概率链接，浏览器会在后台悄悄地发起一个DNS查询请求，向本地DNS服务器或递归DNS服务器询问其IP地址。 缓存结果： 获取到的DNS记录（域名与IP的映射关系）会被存储在浏览器的本地DNS缓存中。这个缓存与操作系统级的DNS缓存是分开的，专门为浏览器优化服务。 即时访问： 当用户实际点击该链接时，浏览器不再需要进行耗时的DNS查询，而是直接从本地缓存中读取IP地址，立即发起TCP连接，从而显著缩短了页面加载的感知时间。 开发者主动控制： rel="dns-prefetch" 虽然浏览器有自动的启发式预取，但开发者可以更精确地指导浏览器。通过向HTML中的链接标签添加 rel="dns-prefetch" 属性，你可以明确指定需要预取的域名。 语法： <link rel="dns-prefetch" href="https://cdn.example.com"> 作用： 当浏览器解析到这行代码时，无论对应的链接是否被用户看到或鼠标悬停，都会立即开始对该域名（ cdn.example.com ）进行DNS预解析。这对于页面上至关重要的第三方资源（如字体、JavaScript库、图片的CDN域名）非常有效，确保了这些关键资源能最快速度开始下载。 与相关技术的对比 预连接（Preconnect）： rel="preconnect" 比DNS预取更进一步。它不仅解析DNS，还会提前建立与服务器的TCP连接，并进行TLS协商（如果是HTTPS）。这相当于把建立完整连接的前几步（DNS -> TCP握手 -> TLS握手）都提前完成了，代价是更高的服务器资源占用。DNS预取是其中成本最低、最轻量的一步。 预加载（Preload）： rel="preload" 用于告诉浏览器“这个资源当前页面 一定 会用到，请以高优先级下载它”。它强制浏览器获取并缓存资源（如字体、关键脚本），而DNS预取只负责域名解析，不下载任何实际内容。 预获取（Prefetch）： rel="prefetch" 用于告诉浏览器“这个资源 下一个 页面可能会用到”，它会在网络空闲时下载并缓存整个资源文件（如下一页的HTML）。DNS预取是它的一个子集和前置步骤。 最佳实践与注意事项 使用场景： 最适合用于用户交互后很可能访问的第三方域名，尤其是渲染关键路径上的资源域名。 控制数量： 避免对页面上的每一个链接都进行预取，过多的并行DNS请求可能造成不必要的网络开销，甚至在某些网络环境下适得其反。应精选最重要的2-4个域名。 HTTPS兼容性： 在现代浏览器中，DNS预取对HTTP和HTTPS页面都有效。 隐私考量： 这项技术可能会“暴露”用户潜在的浏览意图，因为他们可能最终并未点击那个被预解析的链接。但预取请求本身只包含域名查询信息，不包含Cookie或用户身份数据。用户可以在浏览器设置中关闭预取功能。 实现检查： 在浏览器的开发者工具的“网络（Network）”面板中，你可以通过筛选 dns 类型的请求，观察到由预取触发的DNS查询活动。 总结来说， DNS预取 是一种通过提前解析域名来减少关键请求延迟的轻量级优化技术。它结合了浏览器的智能预测和开发者的主动提示（通过 dns-prefetch ），将耗时的DNS查询步骤“隐藏”在用户思考或鼠标移动的过程中，从而提升后续页面或资源加载的瞬时响应速度，是构建快速现代Web体验的有效工具之一。