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

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

вступление

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 при условии, что выполняются следующие два условия: а) пользователь не использует устройство начального уровня и б) пользователь не находится в сотовой сети.

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

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

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

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

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

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

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

    NoState Prefetch будет кэшировать все ресурсы, кроме ресурсов с заголовком no-store Cache-Control. Ресурс будет повторно проверен перед использованием, если имеется заголовок ответа 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, а вместо этого будет использовать новый модуль визуализации. Отсутствие предварительной визуализации страницы снижает потребление памяти 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 Internals, чтобы увидеть, как вы используете NoStatePrefetch.

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

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

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