Представляем предварительную выборку NoState

Кэти Хемпениус
Katie Hempenius

Опубликовано: 20 июля 2018 г.

Вступление

NoState Prefetch — это новый механизм в Chrome, являющийся альтернативой устаревшему процессу предварительной визуализации , используемому для таких функций, как <link rel="prerender"> . Как и предварительная визуализация, она извлекает ресурсы заранее, но, в отличие от неё, не выполняет JavaScript и не отображает какую-либо часть страницы заранее. Цель NoState Prefetch — использовать меньше памяти, чем предварительная визуализация, при этом сокращая время загрузки страницы.

NoState Prefetch — это не API, а механизм, используемый Chrome для реализации различных API и функций. API Resource Hints , а также предварительная загрузка страниц адресной строкой Chrome реализованы с помощью NoState Prefetch. Если вы используете Chrome 63 или более позднюю версию, ваш браузер уже использует NoState Prefetch для таких функций, как <link rel="prerender"> .

В этой статье объясняется, как работает NoStatePrefetch, мотивы его внедрения и инструкции по использованию гистограмм Chrome для просмотра статистики его использования.

Мотивация

Существовало две основные причины внедрения NoState Prefetch:

Уменьшить использование памяти

NoState Prefetch использует всего около 45 МБ памяти. Поддержка сканера предварительной загрузки — основная статья расходов памяти для NoState Prefetch, и эта стоимость остаётся относительно постоянной в различных сценариях использования. Увеличение размера или объёма выборок не оказывает существенного влияния на объём памяти, потребляемый NoState Prefetch.

В отличие от этого, предварительный рендеринг обычно занимает 100 МБ памяти, а потребление памяти ограничено 150 МБ. Такой высокий расход памяти делает его непригодным для устройств начального уровня (т. е. <= 512 МБ ОЗУ). В результате Chrome не выполняет предварительный рендеринг на устройствах начального уровня, а вместо этого предварительно подключается к .

Облегчить поддержку новых функций веб-платформы

При предварительной визуализации не должно происходить никаких действий, связанных с пользователем (например, воспроизведение музыки или видео), а также действий с отслеживанием состояния (например, изменение сеанса или локального хранилища). Однако предотвратить эти действия во время визуализации страницы может быть сложно и затруднительно. NoState Prefetch только извлекает ресурсы заранее: он не выполняет код и не отображает страницу. Это упрощает предотвращение действий, связанных с пользователем и отслеживанием состояния.

Выполнение

Следующие шаги объясняют, как работает NoState Prefetch.

  1. Срабатывает NoStatePrefetch.

    Подсказка о предварительном рендеринге ресурсов (например, <link rel="prerender"> ) и некоторые функции Chrome активируют NoState Prefetch при соблюдении следующих двух условий: а) пользователь не находится на устройстве низкого уровня мощности и б) пользователь не находится в сотовой сети.

  2. Для NoState Prefetch создан новый, специальный рендерер.

    В Chrome « рендерер » — это процесс, отвечающий за обработку HTML-документа, его анализ, построение дерева рендеринга и вывод результата на экран. Каждая вкладка в Chrome, как и каждый процесс NoState Prefetch, имеет свой собственный рендерер для обеспечения изоляции. Это помогает минимизировать последствия сбоев (например, сбоя вкладки), а также предотвратить доступ вредоносного кода к другим вкладкам или другим компонентам системы.

  3. Ресурс, загружаемый с помощью NoState Prefetch, извлекается. Затем HTMLPreloadScanner сканирует этот ресурс, чтобы обнаружить подресурсы, требующие извлечения. Если у основного ресурса или любого из его подресурсов есть зарегистрированный сервис-воркер, эти запросы будут проходить через соответствующий сервис-воркер.

    NoState Prefetch поддерживает только HTTP-метод GET; он не будет извлекать подресурсы, требующие использования других HTTP-методов. Кроме того, он не будет извлекать ресурсы, требующие действий пользователя (например, всплывающие окна аутентификации, клиентский SSL-сертификат или ручное переопределение).

  4. Извлекаемые подресурсы будут извлекаться с сетевым приоритетом «IDLE».

    Сетевой приоритет «IDLE» — это минимально возможный сетевой приоритет в Chrome.

  5. Все ресурсы, извлеченные функцией NoState Prefetch, кэшируются в соответствии с их заголовками кэша.

    NoState Prefetch кэширует все ресурсы, кроме ресурсов с заголовком Cache-Control no-store . Ресурс будет повторно проверен перед использованием, если есть заголовок ответа Vary , заголовок Cache-Control no-cache или если ресурс старше 5 минут.

  6. Рендерер останавливается после загрузки всех подресурсов.

    Если время ожидания подресурсов истекло, рендерер будет остановлен через 30 секунд.

  7. Браузер не вносит никаких изменений в состояние, кроме обновления хранилища cookie и локального кэша DNS. Важно отметить это, поскольку это «NoState» в «NoState Prefetch».

    На этом этапе «нормальной» загрузки страницы браузер, вероятно, будет выполнять действия, изменяющие его состояние: например, выполнять JavaScript, изменять sessionStorage или localStorage , воспроизводить музыку или видео, использовать History API или выводить запросы пользователю. Единственные изменения состояния, которые происходят в NoState Prefetch, — это обновление кэша DNS при получении ответов и обновление хранилища cookie, если ответ содержит заголовок Set-Cookie .

  8. Когда ресурс необходим, он загружается в окно браузера.

    Однако, в отличие от предварительно отрисованной страницы, страница не будет видна сразу — её всё равно должен отрисовать браузер. Браузер не будет повторно использовать тот же рендерер, который он использовал для NoState Prefetch, а вместо этого использует новый. Отсутствие предварительной отрисовки страницы снижает потребление памяти NoStatePrefetch, но также уменьшает его возможное влияние на время загрузки страницы.

    Если на странице есть сервис-воркер, загрузка этой страницы снова пройдет через сервис-воркер.

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

Влияние на веб-аналитику

Страницы, загруженные с использованием NoState Prefetch, регистрируются инструментами веб-аналитики в немного разное время в зависимости от того, собирает ли инструмент данные на стороне клиента или на стороне сервера.

Скрипты клиентской аналитики регистрируют просмотр страницы при её отображении пользователю. Эти скрипты используют выполнение JavaScript, а NoState Prefetch не выполняет JavaScript.

Инструменты серверной аналитики регистрируют метрики при обработке запроса. Для ресурсов, загруженных с помощью NoState Prefetch, может быть значительный разрыв между обработкой запроса и фактическим использованием ответа клиентом (если он вообще используется). Начиная с Chrome 69, NoState Prefetch добавляет заголовок Purpose: Prefetch ко всем запросам, чтобы отличать их от обычного просмотра.

Проверьте это

NoStatePrefetch появился в декабре 2017 года в Chrome 63. В настоящее время он используется для:

  • Реализовать подсказку о prerender ресурсов
  • Получить первый результат в результатах поиска Google
  • Выберите страницы, которые, по прогнозам адресной строки Chrome, с большой вероятностью будут посещены в следующий раз.

Вы можете использовать внутренние компоненты Chrome, чтобы увидеть, как вы используете NoStatePrefetch.

Чтобы просмотреть список сайтов, загруженных с помощью NoState Prefetch, перейдите по адресу chrome://net-internals/#prerender .

Чтобы просмотреть статистику использования NoState Prefetch, перейдите на страницу chrome://histograms и найдите «NoStatePrefetch». Доступны три различные гистограммы NoState Prefetch — по одной для каждого варианта использования NoState Prefetch:

  • «NoStatePrefetch» ​​(статистика использования подсказок ресурсов предварительной визуализации)
  • «gws_NoStatePrefetch» ​​(статистика использования на странице результатов поиска Google)
  • «omnibox_NoStatePrefetch» ​​(статистика использования адресной строки Chrome)