prefetchDNS

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

• Справочник
  • prefetchDNS(href)
• Использование
  • Предварительная загрузка DNS при отрисовке
  • Предварительная загрузка DNS в обработчике событий

Справочник

prefetchDNS(href)

Для поиска хоста вызовите функцию prefetchDNS из react-dom.

import { prefetchDNS } from 'react-dom';

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

См. больше примеров ниже.

Функция prefetchDNS предоставляет браузеру подсказку о том, что он должен найти IP-адрес указанного сервера. Если браузер решит это сделать, это может ускорить загрузку ресурсов с этого сервера.

Параметры

• href: строка. URL сервера, к которому вы хотите подключиться.

Возвращаемое значение

prefetchDNS ничего не возвращает.

Примечания

• Несколько вызовов prefetchDNS с одним и тем же сервером имеют тот же эффект, что и один вызов.
• В браузере вы можете вызвать prefetchDNS в любой ситуации: во время отрисовки компонента, в эффекте, в обработчике событий и так далее.
• При рендеринге на стороне сервера или при рендеринге Server Component 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>
  );
}