prefetchDNS

prefetchDNS("https://example.com");

• 参考
  • prefetchDNS(href)
• 用法
  • 渲染时预取DNS
  • 在事件处理程序中预取DNS

参考

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>
  );
}