prefetchDNS

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

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

参考

¥Reference

prefetchDNS(href)

要查找主机，请从 react-dom 调用 prefetchDNS 函数。

¥To look up a host, call the prefetchDNS function from react-dom.

import { prefetchDNS } from 'react-dom';

function AppRoot() {
  prefetchDNS("https://example.com");
  // ...
}

请参阅下面的更多示例。

¥See more examples below.

prefetchDNS 函数向浏览器提供提示，提示它应该查找给定服务器的 IP 地址。如果浏览器选择这样做，则可以加快从该服务器加载资源的速度。

¥The prefetchDNS function provides the browser with a hint that it should look up the IP address of a given server. If the browser chooses to do so, this can speed up the loading of resources from that server.

参数

¥Parameters

• href：一个字符串。你要连接的服务器的 URL。

  ¥href: a string. The URL of the server you want to connect to.

返回

¥Returns

prefetchDNS 不返回任何内容。

¥prefetchDNS returns nothing.

注意事项

¥Caveats

• 对同一服务器的 prefetchDNS 的多次调用与单次调用具有相同的效果。

  ¥Multiple calls to prefetchDNS with the same server have the same effect as a single call.

• 在浏览器中，任何情况都可以调用 prefetchDNS：在渲染组件时、在副作用中、在事件处理程序中等等。

  ¥In the browser, you can call prefetchDNS in any situation: while rendering a component, in an Effect, in an event handler, and so on.

• 在服务器端渲染或渲染服务器组件时，prefetchDNS 仅在渲染组件时或在源自渲染组件的异步上下文中调用它时才有效。任何其他调用都将被忽略。

  ¥In server-side rendering or when rendering Server Components, prefetchDNS only has an effect if you call it while rendering a component or in an async context originating from rendering a component. Any other calls will be ignored.

• 如果你知道需要的具体资源，你可以调用 其他功能，这将立即开始加载资源。

  ¥If you know the specific resources you’ll need, you can call other functions instead that will start loading the resources right away.

• 预取网页本身所在的同一服务器没有任何好处，因为在给出提示时它已经被查找过。

  ¥There is no benefit to prefetching the same server the webpage itself is hosted from because it’s already been looked up by the time the hint would be given.

• 与 preconnect 相比，如果你推测连接到大量域，则 prefetchDNS 可能会更好，在这种情况下，预连接的开销可能会超过好处。

  ¥Compared with preconnect, prefetchDNS may be better if you are speculatively connecting to a large number of domains, in which case the overhead of preconnections might outweigh the benefit.

用法

¥Usage

渲染时预取 DNS

¥Prefetching DNS when rendering

如果你知道其子组件将从该主机加载外部资源，则在渲染组件时调用 prefetchDNS。

¥Call prefetchDNS when rendering a component if you know that its children will load external resources from that host.

import { prefetchDNS } from 'react-dom';

function AppRoot() {
  prefetchDNS("https://example.com");
  return ...;
}

在事件处理程序中预取 DNS

¥Prefetching DNS in an event handler

在转换到需要外部资源的页面或状态之前，在事件处理程序中调用 prefetchDNS。与在渲染新页面或状态期间调用该进程相比，这可以更早地启动该进程。

¥Call prefetchDNS in an event handler before transitioning to a page or state where external resources will be needed. This gets the process started earlier than if you call it during the rendering of the new page or state.

import { prefetchDNS } from 'react-dom';

function CallToAction() {
  const onClick = () => {
    prefetchDNS('http://example.com');
    startWizard();
  }
  return (
    <button onClick={onClick}>Start Wizard</button>
  );
}