Skip to content

preload.md

Latest commit

 

History

History
164 lines (111 loc) · 9.49 KB

preload.md

File metadata and controls

164 lines (111 loc) · 9.49 KB
Raw
title preload

Фреймворки на основе React часто обрабатывают загрузку ресурсов за вас, поэтому вам может не понадобиться вызывать этот API самостоятельно. Обратитесь к документации вашего фреймворка для получения подробной информации.

preload позволяет заблаговременно загрузить ресурс, такой как таблица стилей, шрифт или внешний скрипт, который вы ожидаете использовать.

preload("https://example.com/font.woff2", {as: "font"});

Справочник {/reference/}

preload(href, options) {/preload/}

Чтобы предварительно загрузить ресурс, вызовите функцию preload из react-dom.

import { preload } from 'react-dom';

function AppRoot() {
  preload("https://example.com/font.woff2", {as: "font"});
  // ...
}

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

Функция preload предоставляет браузеру подсказку о том, что он должен начать загрузку указанного ресурса, что может сэкономить время.

Параметры {/parameters/}

  • href: строка. URL ресурса, который вы хотите загрузить.
  • options: объект. Содержит следующие свойства:
    • as: обязательная строка. Тип ресурса. Его возможные значения включают audio, document, embed, fetch, font, image, object, script, style, track, video, worker.
    • crossOrigin: строка. Политика CORS, которую следует использовать. Возможные значения: anonymous и use-credentials. Это обязательное поле, если as установлено в "fetch".
    • referrerPolicy: строка. Заголовок Referrer, который будет отправлен при запросе. Возможные значения: no-referrer-when-downgrade (по умолчанию), no-referrer, origin, origin-when-cross-origin и unsafe-url.
    • integrity: строка. Криптографический хэш ресурса для проверки его подлинности.
    • type: строка. MIME-тип ресурса.
    • nonce: строка. Криптографический nonce для разрешения ресурса при использовании строгой политики безопасности контента (Content Security Policy).
    • fetchPriority: строка. Предлагает относительный приоритет для загрузки ресурса. Возможные значения: auto (по умолчанию), high и low.
    • imageSrcSet: строка. Используется только с as: "image". Задает набор источников изображения.
    • imageSizes: строка. Используется только с as: "image". Задает размеры изображения.

Возвращает {/returns/}

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

Оговорки {/caveats/}

  • Несколько эквивалентных вызовов preload имеют тот же эффект, что и один вызов. Вызовы preload считаются эквивалентными согласно следующим правилам:
    • Два вызова эквивалентны, если у них одинаковый href, за исключением:
    • Если as установлено в image, два вызова эквивалентны, если у них одинаковые href, imageSrcSet и imageSizes.
  • В браузере вы можете вызывать preload в любой ситуации: во время рендеринга компонента, в эффекте, в обработчике событий и так далее.
  • При рендеринге на стороне сервера или при рендеринге серверных компонентов preload имеет эффект только в том случае, если вы вызываете его во время рендеринга компонента или в асинхронном контексте, возникшем в результате рендеринга компонента. Любые другие вызовы будут проигнорированы.

Использование {/usage/}

Предварительная загрузка во время рендеринга {/preloading-when-rendering/}

Вызывайте preload при рендеринге компонента, если вы знаете, что он или его дочерние компоненты будут использовать определенный ресурс.

Предварительная загрузка внешнего скрипта {/preloading-an-external-script/}

import { preload } from 'react-dom';

function AppRoot() {
  preload("https://example.com/script.js", {as: "script"});
  return ...;
}

Если вы хотите, чтобы браузер немедленно начал выполнение скрипта (а не просто загрузил его), вместо этого используйте preinit. Если вы хотите загрузить модуль ESM, используйте preloadModule.

Предварительная загрузка таблицы стилей {/preloading-a-stylesheet/}

import { preload } from 'react-dom';

function AppRoot() {
  preload("https://example.com/style.css", {as: "style"});
  return ...;
}

Если вы хотите, чтобы таблица стилей была немедленно вставлена в документ (что означает, что браузер начнет ее парсить немедленно, а не просто загружать), вместо этого используйте preinit.

Предварительная загрузка шрифта {/preloading-a-font/}

import { preload } from 'react-dom';

function AppRoot() {
  preload("https://example.com/style.css", {as: "style"});
  preload("https://example.com/font.woff2", {as: "font"});
  return ...;
}

Если вы предварительно загружаете таблицу стилей, разумно также предварительно загрузить любые шрифты, на которые ссылается таблица стилей. Таким образом, браузер сможет начать загрузку шрифта до того, как он загрузит и разберет таблицу стилей.

Предварительная загрузка изображения {/preloading-an-image/}

import { preload } from 'react-dom';

function AppRoot() {
  preload("/banner.png", {
    as: "image",
    imageSrcSet: "/banner512.png 512w, /banner1024.png 1024w",
    imageSizes: "(max-width: 512px) 512px, 1024px",
  });
  return ...;
}

При предварительной загрузке изображения опции imageSrcSet и imageSizes помогают браузеру загрузить изображение правильного размера для размера экрана.

Предварительная загрузка в обработчике событий {/preloading-in-an-event-handler/}

Вызывайте preload в обработчике событий перед переходом на страницу или в состояние, где потребуются внешние ресурсы. Это позволит начать процесс раньше, чем если бы вы вызвали его во время рендеринга новой страницы или состояния.

import { preload } from 'react-dom';

function CallToAction() {
  const onClick = () => {
    preload("https://example.com/wizardStyles.css", {as: "style"});
    startWizard();
  }
  return (
    <button onClick={onClick}>Start Wizard</button>
  );
}