В мире WebKit сканер предварительной загрузки относится к боковому парсеру, который активируется, если основной синтаксический анализатор HTML остановлен загрузкой скрипта блокировки. Поскольку этот сканер с предварительной загрузкой может видеть, какие другие ресурсы (например, таблицы стилей, изображения, входные данные) должны быть извлечены, он может инициировать связанные сетевые запросы как можно раньше, не дожидаясь завершения основного синтаксического анализатора, тем самым улучшая общее время загрузки . А как насчет умозрительной загрузки зависимых ресурсов в таблицу стилей вместо основного файла HTML? К счастью, в WebKit есть то, что называется CSS Preload Scanner .
Во время реализации стандартного парсера HTML5 в WebKit, сканер предварительной загрузки был очищен . Хотя основная часть сканирования все еще находится в основном HTMLPreloadScanner, небольшая часть ушла в свои собственные CSSPreloadScanner. Как и его двоюродный брат HTML, работа CSS Preload Scanner состоит в том, чтобы сканировать таблицу стилей на предмет ресурсов, которые можно получить заранее. На данный момент он поддерживает только правило CSS @import .
Давайте посмотрим на следующий пример. В этом фрагменте (не лучшая практика, только в целях иллюстрации) мы видим элемент script и таблицу стилей:
<p>The quick brown fox jumps over the lazy dog.</p>
<script>setTimeout(function() { document.title = document.title }, 1000);</script>
<p>The quick brown fox jumps over the lazy dog.</p>
<style>
@import url("another-style.css");
body { background-color: white }
</style>
Благодаря scriptэлементу парсер WebKit будет запускать сканер предварительной загрузки, как HTML, так и CSS. Сканер предварительной загрузки быстро понимает, что внутри находится именно этот URL @import. Затем он планирует процесс извлечения another-style.css(фактический запрос будет обработан сетевым стеком).
Поскольку сканер предварительной загрузки CSS довольно прост (ему не нужно понимать полную грамматику CSS), он выполняет свою работу довольно хорошо. На самом деле, произошла оптимизация, так что она быстро выручилась, если @importв таблице стилей не было обнаружено раньше. Это важно, чтобы циклы ЦП не терялись на больших файлах CSS.
Использование @importчасто не рекомендуется (см. Стив Соудер не использует @import ). Учитывая текущие и будущие улучшения в движке браузера, такую передовую практику необходимо время от времени оценивать снова. Конечно, я не рекомендовал бы разбрызгивать @importповсюду на ваших веб-сайтах. Используйте доступные вам инструменты (например, Web Inspector) для анализа производительности сети, и тогда вы сможете принять обоснованное решение.
Как в « Гамлете» : «Импортировать или не импортировать».
Примечание : Отдельное спасибо Илье Григорику за просмотр черновика этого поста.