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