prefetchDNS
允许您预先解析您希望从中加载资源的服务器的 IP。
prefetchDNS("https://example.com");
参考
prefetchDNS(href)
要查找主机,请从 react-dom
调用 prefetchDNS
函数。
import { prefetchDNS } from 'react-dom';
function AppRoot() {
prefetchDNS("https://example.com");
// ...
}
prefetchDNS 函数向浏览器提供了一个提示,即它应该查找给定服务器的 IP 地址。如果浏览器选择这样做,这可以加快从该服务器加载资源的速度。
参数
href
:字符串。您要连接的服务器的 URL。
返回值
prefetchDNS
不返回任何内容。
注意事项
- 多次调用具有相同服务器的
prefetchDNS
与单次调用的效果相同。 - 在浏览器中,您可以在任何情况下调用
prefetchDNS
:渲染组件时、在 Effect 中、在事件处理程序中等。 - 在服务器端渲染或渲染服务器组件时,仅当您在渲染组件时或在源自渲染组件的异步上下文中调用
prefetchDNS
时,它才会生效。任何其他调用都将被忽略。 - 如果您知道您需要的特定资源,则可以调用 其他函数,这些函数将立即开始加载资源。
- 预取网页本身托管的服务器没有任何好处,因为它在给出提示时已经被查找过了。
- 与
preconnect
相比,如果您推测性地连接到大量域名,prefetchDNS
可能更好,在这种情况下,预连接的开销可能会超过收益。
用法
渲染时预取 DNS
如果您知道组件的子组件将从该主机加载外部资源,请在渲染组件时调用 prefetchDNS
。
import { prefetchDNS } from 'react-dom';
function AppRoot() {
prefetchDNS("https://example.com");
return ...;
}
在事件处理程序中预取 DNS
在转换到需要外部资源的页面或状态之前,在事件处理程序中调用 prefetchDNS
。这比在新页面或状态渲染期间调用它更早地启动该过程。
import { prefetchDNS } from 'react-dom';
function CallToAction() {
const onClick = () => {
prefetchDNS('http://example.com');
startWizard();
}
return (
<button onClick={onClick}>Start Wizard</button>
);
}