Опубликовано: 23 января 2026 г.
Chrome запускает новый пробный период, начиная с версии Chrome 144, для добавления функции предварительной отрисовки до завершения скрипта в API правил спекуляции . Этот пробный период позволит сайтам протестировать новую функцию с реальными пользователями. Цель — провести полевые испытания функции и предоставить команде Chrome обратную связь, чтобы помочь доработать её и решить, стоит ли добавлять её на веб-платформу.
Какую проблему это призвано решить?
API правил спекулятивной загрузки позволяет запускать загрузку страниц до фактического перехода пользователей на страницы. Это может улучшить скорость загрузки страниц в будущем, выполняя часть или всю работу заранее. До сих пор допускались два типа спекулятивной загрузки: предварительная загрузка и предварительная отрисовка.
Функция предварительной загрузки (Prefetch) загружает только HTML-документ. Это позволяет получить критически важный первый ресурс заранее, что затем повышает производительность при переходе по URL-адресу. Она не загружает никакие дополнительные ресурсы (например, CSS, JavaScript или изображения) и не выполняет JavaScript, поэтому браузеру все равно может потребоваться выполнить значительную работу при загрузке страницы.
Функция Prerender делает гораздо больше. Она загружает подресурсы и начинает отрисовку страницы и выполнение JavaScript, почти так, как если бы страница была открыта в скрытой фоновой вкладке. Когда пользователь щелкает по ссылке, он может мгновенно получить доступ к навигации, если браузер завершил всю необходимую работу по отрисовке страницы.
Использование опции предварительной отрисовки потенциально значительно повышает производительность, но влечет за собой дополнительные затраты на реализацию, а также дополнительные ресурсы. При недостаточном внимании это может привести к неожиданным побочным эффектам, когда страница полностью предварительно отрисовывается до того, как пользователь фактически перейдет на нее. Например, аналитика может сработать до того, как пользователь перейдет на страницу, искажая статистику, если поставщик аналитики не учитывает предположения.
Сайты, использующие предварительную отрисовку, также должны быть осторожны, чтобы не показывать пользователю устаревшую страницу. Например, если вы предварительно отрисовываете страницу на сайте электронной коммерции, затем добавляете товар в корзину, а затем загружаете ранее отрисованную страницу, вы можете увидеть старое количество товаров в корзине, если сайт не позаботится о том, чтобы это значение было обновлено.
Эти сложности также существуют для предварительной загрузки, если часть управления состоянием происходит на стороне сервера, но для предварительной отрисовки это часто представляет собой большую проблему. Использование предварительной отрисовки может быть более сложным на более сложных сайтах .
Однако, по словам разработчиков, они уже видят прирост производительности от предварительной загрузки страницы и хотят пойти дальше, используя правила спекулятивного выполнения, чтобы получить еще большую выгоду. Вот тут-то и пригодится скрипт предварительной отрисовки до тех пор, пока не будет выполнена предварительная отрисовка.
Что такое pre-ender until script?
Prerender until script — это новый, промежуточный вариант между prefetch и prerender. Он предварительно загружает HTML-документ (как prefetch), а затем начинает рендеринг страницы, включая загрузку всех подресурсов (как prerender). Однако, что крайне важно, браузер будет избегать выполнения элементов <script> (как для встроенных скриптов, так и для скриптов src ). При обнаружении блокирующего тега <script> он приостанавливает работу парсера и ждет, пока пользователь перейдет на страницу, прежде чем продолжить. Тем временем сканер предварительной загрузки может продолжить работу и загрузить необходимые для страницы подресурсы, чтобы они были готовы к использованию, когда страница сможет продолжить загрузку.
За счет предотвращения блокировки элементов <script> удается избежать значительной части сложностей реализации. В то же время, запуск процесса рендеринга и загрузка подресурсов дают огромный выигрыш по сравнению с предварительной загрузкой — потенциально почти такой же, как при полной предварительной отрисовке.
В лучшем случае (когда на странице вообще нет скриптов) эта опция выполнит предварительную отрисовку всей страницы. Или, если страница содержит только элементы скриптов в нижнем колонтитуле или только скрипты с атрибутами async или defer , страница будет полностью предварительно отрисована без этого JavaScript. Даже в худшем случае (когда есть блокирующий скрипт в <head> ), запуск отрисовки страницы, и в частности предварительная загрузка подресурсов, должна значительно улучшить скорость загрузки страницы.
Как использовать скрипт предварительной отрисовки до завершения процесса?
Сначала включите эту функцию , затем используйте prerender until script так же, как и другие параметры API правил спекуляции, с новым ключом prerender_until_script (обратите внимание на подчеркивания, чтобы это было допустимое имя ключа JSON).
Это можно использовать с правилами списков статических URL-адресов:
<script type="speculationrules">
{
"prerender_until_script": [{
"urls": ["next.html", "next2.html"]
}]
}
</script>
Его также можно использовать с правилами для документов, где URL-адреса для прогнозирования доступны в виде ссылок на странице:
<script type="speculationrules">
{
"prerender_until_script": [{
"where": { "href_matches": "/*" }
}]
}
</script>
Затем скрипт предварительной отрисовки можно использовать со стандартными параметрами API правил спекуляции, включая различные значения степени готовности .
Поскольку JavaScript не будет выполняться, document.prerendering не может быть прочитан, как и событие prerenderingchange . Однако время activationStart будет ненулевым.
В следующем примере показано, как развернуть предыдущий пример с резервным вариантом предварительной загрузки для браузеров, которые не поддерживают prerender_until_script :
<script type="speculationrules">
{
"prerender_until_script": [{
"where": { "href_matches": "/*" }
}],
"prefetch": [{
"where": { "href_matches": "/*" }
}]
}
</script>
Chrome без проблем справится с этим дублированием и выполнит наиболее подходящее правило для каждого параметра активности.
В качестве альтернативы вы можете использовать их с разными уровнями готовности для предварительной загрузки, а затем перейти к предварительной отрисовке до тех пор, пока скрипт не получит больше сигналов , как было предложено ранее с prefetch/prerender :
<script type="speculationrules">
{
"prefetch": [{
"where": { "href_matches": "/*" },
"eagerness": "eager"
}],
"prerender_until_script": [{
"where": { "href_matches": "/*" },
"eagerness": "moderate"
}]
}
</script>
Обратите внимание, что таким образом нельзя преобразовать скрипт предварительной отрисовки в полную предварительную отрисовку, но сообщите нам, если вас интересует поддержка этого подхода в Chrome , пометив эту ошибку звездочкой .
Приостановлен ли весь JavaScript?
Нет, только элементы <script> приводят к приостановке работы парсера. Это означает, что встроенные обработчики скриптов (например, onload ) или URL-адреса javascript: не вызовут приостановки и могут быть выполнены.
Например, это может вывести в консоль сообщение Hero image is now loaded перед переходом на следующую страницу:
<img src="hero.jpg"
onload="console.log('Hero image is now loaded!')"
alt="Example Photo">
В то время как если обработчик событий добавлен с помощью ` <script> , Hero image is now loaded не будет выведено в консоль до тех пор, пока страница не будет активирована:
<img src="hero.jpg" id="hero-image" alt="Example Photo">
<script>
const heroImage = document.querySelector('#hero-image');
if (heroImage.complete) {
console.log('Hero image is now loaded');
} else {
heroImage.addEventListener('load',
(event) => {
console.log('Hero image is now loaded');
}
);
}
</script>
Это может показаться нелогичным, но во многих случаях (как в предыдущем примере!) лучше предпринять необходимые действия немедленно, поскольку откладывание может привести к неожиданным осложнениям.
Кроме того, большинство встроенных событий требуют действия пользователя (например, onclick , onhover ) и поэтому не будут выполняться до тех пор, пока пользователь не сможет взаимодействовать со страницей.
Наконец, предварительно запущенные блокирующие скрипты приостановят работу парсера и, следовательно, предотвратят обнаружение встроенных обработчиков событий. Таким образом, сообщение не будет загружено в консоль до активации, несмотря на то, что это встроенный обработчик событий:
<script>...</script>
<img src="hero.jpg"
onload="console.log('Hero image is now loaded!')"
alt="Example Photo">
Это особенно актуально для встроенных обработчиков скриптов, использующих ранее определенный код, которые будут продолжать работать должным образом:
<script>
imageLoadFunction() = {
...
}
</script>
<img src="hero.jpg" onload="imageLoadFunction" alt="Example Photo">
А что насчет скриптов с атрибутами async и defer ?
Скрипты с атрибутами async и defer откладываются до момента активации, но не блокируют дальнейшую обработку парсером остальной части страницы. Скрипты загружаются, но не выполняются до тех пор, пока не будет осуществлен переход на страницу.
Как включить предварительную отрисовку до выполнения скрипта?
Функция предварительной отрисовки до появления скрипта — это новая опция, над которой мы работаем, и она может измениться, поэтому её нельзя использовать без предварительного включения.
Для разработчиков эту функцию можно включить локально с помощью флага chrome://flags/#prerender-until-script или с помощью флага командной строки --enable-features=PrerenderUntilScript .
Функция предварительной отрисовки до появления скрипта теперь также доступна в качестве пробной версии Chrome 144. Пробные версии позволяют владельцам сайтов включить функцию на своих сайтах, чтобы реальные пользователи могли ею воспользоваться без необходимости ручной активации. Это позволяет оценить влияние функции на реальных пользователей и убедиться, что она работает должным образом.
Протестируйте и поделитесь своим мнением.
Мы очень рады этому предложенному дополнению к API правил спекуляций и призываем владельцев сайтов протестировать его.
Поделитесь своим мнением о предложении в репозитории GitHub . Для обратной связи по реализации в Chrome создайте сообщение об ошибке в Chromium .