В последних двух модулях вы познакомились с такими понятиями, как отсрочка загрузки JavaScript и отложенная загрузка изображений и элементов <iframe> . Отсрочка загрузки ресурсов снижает загрузку сети и ЦП во время начальной загрузки страницы за счет загрузки ресурсов в тот момент, когда они необходимы, а не их предварительной загрузки, где они потенциально могут остаться неиспользованными. Это может сократить время начальной загрузки страницы, но последующие взаимодействия могут вызвать задержку, если ресурсы, необходимые для их работы, еще не загружены в момент их возникновения.
Например, если страница содержит настраиваемый элемент выбора даты, вы можете отложить использование ресурсов средства выбора даты до тех пор, пока пользователь не взаимодействует с элементом. Однако загрузка ресурсов средства выбора даты по требованию может привести к задержке — возможно, небольшой, а возможно и нет, в зависимости от сетевого подключения пользователя, возможностей устройства или того и другого — до тех пор, пока ресурсы не будут загружены, проанализированы и станут доступны для выполнения.
Это немного сложный баланс: вы не хотите тратить пропускную способность на загрузку ресурсов, которые могут остаться неиспользованными, но задержка взаимодействий и последующих загрузок страниц также может быть не идеальной. К счастью, существует ряд инструментов, которые вы можете использовать для достижения лучшего баланса между этими двумя крайностями, и в этом модуле рассматриваются некоторые методы, которые вы можете использовать для достижения этой цели, такие как предварительная выборка ресурсов, предварительная отрисовка целых страниц и предварительное кэширование ресурсов с помощью сервисного работника. .
Предварительная выборка ресурсов, необходимых в ближайшем будущем, с низким приоритетом.
Можно упреждающе получить ресурсы , включая изображения, таблицы стилей или ресурсы JavaScript, с помощью подсказки ресурса <link rel="prefetch"> . Подсказка prefetch сообщает браузеру, что ресурс, вероятно, потребуется в ближайшем будущем.
Если указана подсказка prefetch , браузер может затем инициировать запрос этого ресурса с самым низким приоритетом , чтобы избежать конфликта с ресурсами, необходимыми для текущей страницы.
Предварительная выборка ресурсов может улучшить взаимодействие с пользователем, поскольку пользователю не требуется ждать загрузки ресурсов, необходимых в ближайшем будущем, поскольку они могут быть мгновенно извлечены из дискового кэша в нужный момент.
<head>
<!-- ... -->
<link rel="prefetch" as="script" href="/date-picker.js">
<link rel="prefetch" as="style" href="/date-picker.css">
<!-- ... -->
</head>
Предыдущий фрагмент HTML сообщает браузеру, что он может предварительно загрузить файлы date-picker.js и date-picker.css когда он находится в режиме ожидания. Также можно динамически предварительно выбирать ресурсы, когда пользователь взаимодействует со страницей в JavaScript.
prefetch поддерживается во всех современных браузерах, кроме Safari , где она доступна с помощью флага. Если у вас есть острая необходимость упреждающей загрузки ресурсов вашего веб-сайта таким образом, чтобы это работало во всех браузерах, и вы используете сервис-воркера, прочитайте следующий раздел этого модуля о предварительном кэшировании ресурсов с помощью сервис-воркера .
Предварительная загрузка страниц для ускорения будущей навигации.
Также возможно выполнить предварительную выборку страницы и всех ее подресурсов, указав атрибут as="document" при указании на HTML-документ:
<link rel="prefetch" href="/page" as="document">
Когда браузер бездействует, он может инициировать запрос с низким приоритетом для /page .
В браузерах на базе Chromium вы можете выполнять предварительную выборку документов с помощью API Speculation Rules . Правила спекуляции определяются как объект JSON, включенный в HTML-код страницы или добавляемый динамически с помощью JavaScript:
<script type="speculationrules">
{
"prefetch": [{
"source": "list",
"urls": ["/page-a", "/page-b"]
}]
}
</script>
Объект JSON описывает одно или несколько действий (в настоящее время поддерживаются только prefetch и prerender ) и список URL-адресов, связанных с этим действием. В предыдущем фрагменте HTML браузеру указано выполнить предварительную выборку /page-a и /page-b . Как и в случае с <link rel="prefetch"> , правила спекуляции — это подсказка, которую браузер может игнорировать при определенных обстоятельствах.
Библиотеки, такие как Quicklink, улучшают навигацию по страницам за счет динамической предварительной загрузки или предварительной обработки ссылок на страницы, как только они становятся видимыми в области просмотра пользователя. Это увеличивает вероятность того, что пользователь в конечном итоге перейдет на эту страницу — по сравнению с предварительной загрузкой всех ссылок на странице.
Страницы пререндера
Помимо предварительной загрузки ресурсов, также можно дать браузеру указание выполнить предварительную отрисовку страницы перед тем, как пользователь перейдет на нее . Это может обеспечить практически мгновенную загрузку страниц, поскольку страница и ее ресурсы загружаются и обрабатываются в фоновом режиме. Как только пользователь переходит на страницу, страница помещается на передний план.
Предварительный рендеринг поддерживается через API Speculation Rules:
<script type="speculationrules">
{
"prerender": [
{
"source": "list",
"urls": ["/page-a", "page-b"]
}
]
}
</script>
Предварительная выборка и предварительный рендеринг демо
Предварительное кэширование сервисного работника
Также возможно спекулятивно выполнить предварительную выборку ресурсов с помощью сервис-воркера . Предварительное кэширование Service Worker может извлекать и сохранять ресурсы с помощью Cache API , позволяя браузеру обслуживать запросы с помощью Cache API, не обращаясь к сети. Предварительное кэширование Service Worker использует очень эффективную стратегию кэширования Service Worker, известную как стратегия только кэширования . Этот шаблон очень эффективен, поскольку, как только ресурсы помещаются в кэш сервис-воркера, они извлекаются практически мгновенно по запросу.
Чтобы предварительно кэшировать ресурсы с помощью сервис-воркера, вы можете использовать Workbox . Однако если вы предпочитаете, вы можете написать свой собственный код для кэширования заранее определенного набора файлов. В любом случае вы решите использовать сервис-воркера для предварительного кэширования ресурсов, важно знать, что предварительное кэширование происходит при установке сервис-воркера . После установки предварительно кэшированные ресурсы доступны для извлечения на любой странице вашего веб-сайта, которой управляет сервисный работник.
Workbox использует манифест предварительного кэширования, чтобы определить, какие ресурсы следует предварительно кэшировать. Манифест предварительного кэширования — это список файлов и информации о версиях, который служит «источником истины» для ресурсов, подлежащих предварительному кэшированию.
[{
url: 'script.ffaa4455.js',
revision: null
}, {
url: '/index.html',
revision: '518747aa'
}]
Приведенный выше код представляет собой пример манифеста, который включает два файла: script.ffaa4455.js и /index.html . Если ресурс содержит информацию о версии в самом файле (известную как хеш файла ), то свойство revision можно оставить равным null , поскольку файл уже имеет версию (например, ffaa4455 для ресурса script.ffaa4455.js в предыдущем примере). код). Для неверсионных ресурсов редакция может быть создана во время сборки.
После настройки сервис-воркера можно использовать для предварительного кэширования статических страниц или их подресурсов, чтобы ускорить последующую навигацию по страницам.
workbox.precaching.precacheAndRoute([
'/styles/product-page.ac29.css',
'/styles/product-page.39a1.js',
]);
Например, на странице со списком продуктов электронной коммерции сервис-воркер может использоваться для предварительного кэширования CSS и JavaScript, необходимых для отображения страницы сведений о продукте, благодаря чему навигация на страницу сведений о продукте становится намного быстрее. В предыдущем примере product-page.ac29.css и product-page.39a1.js предварительно кэшируются. Метод precacheAndRoute , доступный в workbox-precaching автоматически регистрирует обработчики, необходимые для обеспечения извлечения предварительно кэшированных ресурсов из API сервисного работника, когда это необходимо.
Поскольку сервис-воркеры широко поддерживаются , вы можете использовать предварительное кэширование сервис-воркеров в любом современном браузере, где этого требует ситуация.
Проверьте свои знания
С каким приоритетом возникает подсказка prefetch ?
В чем разница между предварительной загрузкой и предварительной отрисовкой страницы?
Кэш сервисного работника и кэш HTTP одинаковы.
Далее: обзор веб-воркеров
Теперь, когда вы знаете, насколько полезными могут быть предварительная выборка, предварительный рендеринг и предварительное кэширование сервисных работников, когда дело доходит до ускорения навигации по будущим страницам, вы можете принять некоторые обоснованные решения о том, как это может быть полезно для вашего веб-сайта и его пользователь.
Далее дается обзор веб-воркеров и того, как они могут снять с основного потока дорогостоящую работу и предоставить основному потоку больше места для взаимодействия с пользователем. Если вы когда-нибудь задавались вопросом, что можно сделать, чтобы дать основному потоку больше свободы, то следующие два модуля стоят вашего времени!