Представляем предварительную выборку 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)