Предварительно загружать ресурсы страницы с предварительной загрузкой

Об авторе Феликс Ант Технологическая команда Financial Data Experience

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

preload предоставляет декларативную команду, которая позволяет браузеру загружать указанный ресурс заранее (без выполнения его после загрузки) и выполнять его, когда это необходимо. Предлагаемые преимущества в основном

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

Как использовать предварительную загрузку

Создано с тегом ссылки

<!-- 使用 link 标签静态标记需要预加载的资源 -->
<link rel="preload" href="/path/to/style.css" as="style">

<!-- 或使用脚本动态创建一个 link 标签后插入到 head 头部 -->
<script>
const link = document.createElement('link');
link.rel = 'preload';
link.as = 'style';
link.href = '/path/to/style.css';
document.head.appendChild(link);
</script>

Создано с использованием поля «Ссылка» в заголовке ответа HTTP.

Link: <https://example.com/other/styles.css>; rel=preload; as=style

Например, обычно используемый antd будет полагаться на файл шрифта font.js в CDN, мы можем настроить его на загрузку заранее, а некоторые модули загружаются асинхронно по требованию, но в некоторых сценариях мы знаем, что они будут загружен, то вы можете установить предварительную загрузку на предварительную загрузку, например:

<link rel="preload" as="font"   href="https://at.alicdn.com/t/font_zck90zmlh7hf47vi.woff">
<link rel="preload" as="script" href="https://a.xxx.com/xxx/PcCommon.js">
<link rel="preload" as="script" href="https://a.xxx.com/xxx/TabsPc.js">

Как узнать, поддерживает ли браузер предварительную загрузку

В настоящее время поддерживаемые нами браузеры в основном являются высокоуровневыми версиями Chrome, поэтому вы можете уверенно использовать технологию предварительной загрузки. Поддержка, найденная на caniuse.com для других сред, выглядит следующим образом:

В среде браузера, не поддерживающей предварительную загрузку, соответствующий тег ссылки будет игнорироваться, и если требуется определение функции, то:

const isPreloadSupported = () => {
  const link = document.createElement('link');
  const relList = link.relList;

  if (!relList || !relList.supports) {
    return false;
  }

  return relList.supports('preload');
};

Как отличить предварительную загрузку от предварительной выборки

• предварительная загрузка должна сообщить браузеру страницудолженТребуемые ресурсы, браузерБудузагрузить эти ресурсы;
• prefetch должен сообщить странице браузеравозможноТребуемые ресурсы, браузерне обязательноЗагрузите эти ресурсы.

Предварительная загрузка подтверждает, что указанные ресурсы будут загружены, например, в нашем сценарии после инициализации x-report.js будут загружены PcCommon.js и TabsPc.js, и эти ресурсы могут быть предварительно загружены;

Предсказана предварительная выборка для загрузки указанных ресурсов. Для нашей сцены мы будем инициализировать первую сборку экрана после загрузки страницы. Когда пользователь прокручивает, он возьмет второй экран, и если пользовательское поведение может быть предсказано, это может быть предприниматься , Следующий экран модуля.

preload повысит приоритет загрузки ресурсов

Прежде чем использовать предварительную загрузку, загрузите, когда встретится зависимость ресурса:

После использования предварительной загрузки ресурс будет загружаться заранее независимо от того, используется он или нет:

Как видите, порядок загрузки ресурсов предварительной загрузки будет продвинутым:

Не злоупотребляйте предварительной загрузкой

После использования предварительной загрузки в Chrome появится предупреждение:

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

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

Избегайте смешивания предварительной загрузки и предварительной выборки

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

<link rel="preload"   href="https://at.alicdn.com/t/font_zck90zmlh7hf47vi.woff" as="font">
<link rel="prefetch"  href="https://at.alicdn.com/t/font_zck90zmlh7hf47vi.woff" as="font">

Логика использования предварительной загрузки и предварительной выборки может быть не написана вместе, но как только ресурс будет предварительно загружен или предварительно выбран, он будет приносить двойные сетевые запросы, которые можно определить через сетевую панель консоли Chrome:

Избегайте неправильного использования предварительной загрузки для загрузки ресурсов из разных источников.

Загрузка файла шрифта запускается, когда в css есть селектор, примененный к элементу, который был отрендерен в дереве DOM, и установлено правило @font-face. Когда файл шрифта загружается, эти элементы в DOM находятся в невидимом состоянии. Предварительная загрузка файлов шрифтов, о которых известно, что они загружены, не только улучшит производительность, но и позволит оптимизировать работу.

Известно, что в нашем сценарии antd.css зависит от файла шрифта, поэтому мы можем предварительно загрузить этот файл шрифта:

<link rel="preload" as="font" href="https://at.alicdn.com/t/font_zck90zmlh7hf47vi.woff">

Однако я обнаружил, что этот файл загружается дважды:

Причина в том, что при предварительной загрузке междоменных файлов мы должны добавить атрибут crossorigin:

<link rel="preload" as="font" crossorigin href="https://at.alicdn.com/t/font_zck90zmlh7hf47vi.woff">

Посмотрите еще раз на сетевой запрос, он становится единицей.

Спецификация W3 объясняет это следующим образом:

Preload links for CORS enabled resources, such as fonts or images with a crossorigin attribute, must also include a crossorigin attribute, in order for the resource to be properly used.

Тогда почему есть два запроса с несовместимыми приоритетами и без кэш-попаданий? Это приводит к следующей теме для объяснения.

Правила приоритета загрузки разных ресурсов

Сначала посмотрим на картинку:

Эту таблицу см. в разделе Приоритеты и планирование ресурсов Chrome.

На этом рисунке показан приоритет загрузки разных ресурсов на разных этапах рендеринга браузера в Chrome 46 и более поздних версиях. Здесь нам нужно только обратить внимание на приоритет, воплощенный DevTools Priority, который разделен на пять уровней:

• Самый высокий
• Высота
• Середина
• низкий
• Самый низкий

Основные ресурсы HTML, его приоритет самый высокий

ресурс стиля css, его приоритет также самый высокий

CSS(match) относится к допустимому файлу стиля с правилами для существующей модели DOM.

ресурс скрипта скрипта с разными приоритетами

Первые три файла js — это статические зависимости ресурсов, написанные на html, а последние три файла js — зависимости ресурсов компонентов, которые загружаются асинхронно по запросу в соответствии с первым экраном, который проверяет это правило.

Ресурсы шрифта шрифта с разными приоритетами

В файле стиля css есть @font-face, который зависит от файла шрифта, а файл шрифта, зависящий от файла стиля, загружается с наивысшим приоритетом; При использовании предварительной загрузки для предварительной загрузки файла шрифта, если атрибут crossorigin не указан (даже если это одно и то же происхождение), для загрузки файла шрифта будет использоваться CORS в анонимном режиме с высоким приоритетом. следующий рисунок: Первым высоким приоритетом является запрос предварительной загрузки:

Вторым высшим является запрос на введение стиля:

Видно, что в запросе предварительной загрузки отсутствует поле заголовка запроса источника, что указывает на то, что запрос является анонимным. Если два запроса могут совместно использовать кеш, текущее решение состоит в том, чтобы добавить атрибут crossorigin для предварительной загрузки, чтобы заголовок запроса содержал источник, и он был бы тем же источником, что и запрос, введенный стилем, чтобы попасть кеш:

<link rel="preload" as="font" crossorigin href="https://at.alicdn.com/t/font_zck90zmlh7hf47vi.woff">

Остался только один запрос:

На диаграмме водопада сети также показана успешная предварительная загрузка, и последующие попадания в кеш не перезагружаются снова:

Суммировать

Предварительная загрузка — это хорошо. Она может сказать браузеру, что нужно заранее загрузить ресурсы, необходимые для текущей страницы, и разделить выполнение загрузки и синтаксического анализа. Правильное выполнение может значительно улучшить первый рендеринг, но избегайте злоупотреблений и различайте его связь с prefetch и необходимость знать разницу в приоритетах сети при предварительной загрузке различных ресурсов.

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

Использованная литература:

• https://www.w3.org/TR/preload/
• https://www.w3.org/TR/resource-hints/
• Prioritizing Your Resources with link rel='preload'
• Preload, Prefetch And Priorities in Chrome
• A Link: rel=preload Analysis From the Chrome Data Saver Team

Команда желает вам успехов в следующем году, спасибо за вашу поддержку колонки ~ Студенты, которые заинтересованы в команде, могут следить за колонкой или отправлять свои резюме на «tao.qit####alibaba-inc.com». replace('#### ', '@'), присоединяйтесь к людям с высокими идеалами~

Оригинальный адрес:GitHub.com/proto team/no…