что такое предварительная загрузка
Для чего стоит использовать предварительную загрузку?
Предварительная загрузка (или предзагрузка) это новый стандарт, предназначенный для улучшения производительности и предоставления разработчиком более точного контроля над загрузкой ресурсов. Она дает разработчикам возможность создавать пользовательскую последовательность и логику загрузки, позволяющую избежать проблем с производительностью, вызываемых скриптовыми загрузчиками.
Статьи по этой теме на SmashingMagazine:
Несколько недель назад я добавил поддержку предзагрузки в Chrome Canary и если не возникнет каких-либо непредвиденных багов, она будет в стабильной версии Chrome в середине апреля. Но что такое предзагрузка? Что она делает и чем она может быть полезна?
Если объяснять по-человечески, то это способ сообщить браузеру, чтобы он начал скачивать определенный ресурс, так как мы, авторы страницы (администраторы сервера или разработчики) знаем, что очень скоро этот ресурс потребуется браузеру.
Разве у нас нет такой возможности?
Да, это так, но между ними есть значительные различия. Эти различия как раз и требуют появления новой директивы, решающей задачи, непосильные старым.
Как можно добиться лучшей предзагрузки?
Предзагрузка также отличается тем, что в ней есть функциональное событие onload (как минимум в Chrome это событие не работает для двух остальных значений rel ).
Сочетание всех этих характеристик реализует целый спектр возможностей, ранее нам недоступных.
Рассмотрим их по отдельности.
Загрузка “поздно-обнаруживаемых” ресурсов
Основным способом использования предзагрузки будет ранняя загрузка “поздно-обнаруживаемых” ресурсов. Хотя большинство ресурсов в разметке предзагрузчик браузера обнаруживает достаточно быстро, не все ресурсы указаны в разметке страницы. Некоторые ресурсы спрятаны в CSS и JavaScript и браузер не может узнать о них до того, как они понадобятся. Поэтому во многих случаях эти ресурсы приводят к задержке рендеринга, вывода текста или загрузки критических частей страницы.
Теперь у вас есть средства сказать браузеру: “Эй, браузер! Вот этот ресурс тебе обязательно понадобится, поэтому загружай его сейчас”.
В коде эта фраза выглядит следующим образом:
Атрибут as указывает тип скачиваемого ресурса, у него могут быть следующие значения:
Полный список значений есть в спецификации.
Пропуск атрибута as или задание некорректного значения эквивалентно XHR-запросу, в котором браузер не знает, что он выбирает, вследствие чего выборка происходит с низким приоритетом.
Ранняя загрузка шрифтов
Одной из популярных разновидностей “поздно обнаруживаемых критических ресурсов” являются веб-шрифты. С одной стороны, в большинстве случаев они критичны для рендеринга текста на странице (пока у нас не будут реализованы свойства font-display). С другой, шрифты находятся глубоко в недрах CSS и даже если браузерный предзагрузчик распарсил CSS, он не может быть уверен в том, что они понадобятся, пока не разберется с привязкой вызывающих их селекторов к конкретным узлам DOM. Хотя в теории браузеры должны с этим разбираться, ни один из них не делает этого, потому как это приводило бы к ложным загрузкам в случаях, когда стилевые декларации переписываются в последующих строках CSS.
В общем, все сложно.
Но мы могли бы обойти всю эту сложность включив директиву предзагрузки шрифтов, которые точно вам понадобятся. Например:
Один момент следует уточнить: вы должны добавить атрибут crossorigin при выборке шрифтов, так как она производится в анонимном режиме CORS. Да, даже в том случае, если шрифты находятся на том же хосте, что и страница. Увы.
Атрибут type обеспечивает предзагрузку этого ресурса только в тех браузерах, которые поддерживают этот тип шрифта. На данный момент предварительная загрузка поддерживается только в Chrome и он прекрасно поддерживает WOFF2, но в будущем предзагрузка может появиться и в других браузерах и мы не можем гарантировать, что в них будет поддержка WOFF2. То же самое относится и к остальным типам ресурсов, которые вы предварительно загружаете и у которых нет стопроцентной поддержки в браузерах.
Динамическая загрузка без запуска
Следующий интересный сценарий, который становится доступным, это скачивание нужного вам ресурса, который вы не собираетесь сразу запускать. Например, в случае, если вы хотите выполнить скрипт в определенный период существования страницы, не имея контроля над скриптом (то есть без возможности добавить функцию runNow() ).
Сейчас мы очень ограничены в выборе способов для этого. Если вы только вставите скрипт в нужную точку для выполнения, браузер должен будет сначала скачать скрипт до запуска, это может занять время. Вы могли бы скачать скрипт заранее используя XHR, но браузер откажется делать это, так как ресурс не был скачан с тем же типом, который пытается его использовать.
Так что вы можете сделать?
Вы можете запустить это в самом начале загрузки страницы, до той точки, когда вы хотите выполнить скрипт (но как только вы будете уверены, что этот код не будет мешать загрузке других, более критичных ресурсов). Теперь, когда вам надо его запустить, просто вставьте тег script и этого хватит.
Асинхронный загрузчик в разметке
Другой крутой хак это использование обработчика onload для создания некоего подобия асинхронного загрузчика прямо в разметке. Скотт Джел первым экспериментировал с этим, как с частью своей библиотеки loadCSS. Мы можем использовать следующий краткий код:
И этого достаточно, чтобы получить асинхронную загрузку стилей. Скотт также сделал страницу, демонстрирующую эту возможность.
Это также работает и с асинхронными скриптами.
Что такое предварительная загрузка
значит загрузить файлы игры сможешь 7 апреля.
значит загрузить файлы игры сможешь 7 апреля.
Я просто загружу их, или смогу поиграть?
Я просто загружу их, или смогу поиграть?
просто загрузишь, чтоб когда игра выйдет не пришлось качать весь объём, а начать играть сразу(ну или придёться докачать какую-то часть).
Предварительная загрузка ключевых запросов
Поэтому, при проведении аудита PageSpeed Insights, может появиться данная рекомендация. Её необходимо устранить произведя корректные настройки.
Что такое предзагрузка и зачем она нужна
Почему так происходит? Получив запрос. Браузер сам решает какой контент на странице ему загружать первым. При этом он опирается на подсказки разработчика, который указывает о важности той или иной информации. К примеру, ресурсы CSS он загрузит в первую очередь, раньше чем изображения, сценарии и прочее.
Но, как человек знающий свою страницу лучше браузера, вы можете сообщить ему, что ряд ключевых запросов обязательно понадобятся позже. И неплохо было бы начать их предварительную загрузку как можно раньше. Сделать это можно используя тег .
Указав его, вы можете сообщить браузеру, что данный ресурс является необходимой частью кода и начать извлекать его требуется при малейшей же возможности. На практике, указание выглядит таким образом:
В обоих случаях приоритет ресурса остался неизменным. Разница лишь в том, что получив от вас информацию, браузер сможет начать загрузку заранее, так как уже оповещён о необходимости данной информации для адекватной работы.
Как это выглядит на практике
Рассмотрим мифический сайт со своей цепочкой критических запросов. К примеру, выглядит она таким образом:
Предварительная загрузка в PHP 7.4
Перевод данной статьи подготовлен специально для студентов курса «Backend разработчик на PHP».
В PHP 7.4 добавлена предварительная загрузка — возможность, которая позволяет значительно повысить производительность кода.
О предзагрузке в двух словах.
Поговорим о новой возможности подробнее.
Больше, чем Opcache
Да, предварительная загрузка основывается на opcache, но это не совсем одно и то же. Opcache берет исходные файлы PHP, компилирует их в опкоды, после чего сохраняет скомпилированные файлы на диск.
Опкоды можно считать низкоуровневым представлением вашего кода, которое легко интерпретируется во время выполнения. Таким образом, opcache позволяет пропустить этап трансляции исходных файлов в то, что, собственно, и необходимо интерпретатору PHP во время выполнения. Заметная экономия!
Тем не менее можно сэкономить еще больше. Скомпилированные при помощи opcash файлы ничего не знают о других файлах. Если у вас есть класс А, являющийся расширением класса B, их все равно нужно будет связать во время выполнения. Кроме того, opcache проверяет, изменились ли исходные файлы, и при обнаружения изменений аннулирует их кэши.
И тут на помощь приходит предварительная загрузка: она не только компилирует исходные файлы в опкоды, но и связывает зависимые классы, трейты и интерфейсы. Она сохраняет такой «скомпилированный» фрагмент исполняемого кода (то есть кода, который может использовать PHP-интерпретатор) в памяти.
Когда на сервер поступает запрос, тот может использовать части кодовой базы, которая уже была загружена в память, без лишних затрат времени.
О каких же «частях кодовой базы» идет речь?
Предварительная загрузка на практике
Для корректной предварительной загрузки разработчик должен указать серверу, какие файлы нужно загрузить. Это делается с помощью простого PHP-скрипта, так что бояться нечего.
Вот как вы можете подключить этот скрипт в php.ini:
А вот пример реализации:
Предупреждение о невозможности предварительно загрузить несвязанный класс
Появилось предупреждение Can’t preload unlinked class? Дело в том, что перед предзагрузкой файлов нужно также предварительно загрузить их зависимые объекты — интерфейсы, трейты и родительские классы.
Если возникнут какие-либо проблемы с зависимостями классов, то вас предупредят об этом при запуске сервера:
Обратите внимание, что opcache_compile_file() только распарсит файл, но не выполнит его. Это значит, что если у класса есть зависимости, которые не были предварительно загружены, то и сам класс не может быть предварительно загружен.
Это не критично: сервер будет работать, как обычно, но в вашем распоряжении не будет всех файлов, которые вы хотели предварительно загрузить.
Именно поэтому нужно внимательнее подбирать файлы для предварительной загрузки, чтобы избежать проблем с зависимостями. Делать это вручную — задача неблагодарная и трудоемкая, так что разработчики уже трудятся над автоматизированными решениями.
Поддержка composer
Наиболее перспективное автоматизированное решение готовят разработчики composer, который уже используется в большинстве современных PHP-проектов.
Требования к серверу
Есть еще два важных момента, о которых должен помнить разработчик при использовании предварительной загрузки.
На практике вам понадобится выделенный (виртуальный) сервер, чтобы оптимизировать предварительно загруженные файлы для отдельного проекта. Имейте это в виду.
Производительность
Теперь перейдем к самому важному вопросу: действительно ли предварительная загрузка повышает производительность?
Разумеется! Бен Морел (Ben Morel) поделился результатами сравнительного тестирования, которые можно найти в той же теме по composer, на которую мы ссылались выше.
И еще, что интересно. При желании вы можете предварительно загрузить только так называемые hot classes — классы, которые часто используются в вашей кодовой базе. Тесты Бена Морела показывают, что загрузка всего около 100 таких классов обеспечивает более высокий рост производительности, чем предварительная загрузка всего сразу. В первом случае производительность повышается на 17 %, во втором — на 13 %.
Разумеется, выбор классов для предварительной загрузки зависит от конкретного проекта. Разумнее всего для начала просто предварительно загрузить как можно больше. Если же вам так важны эти несколько процентов разницы в производительности, то придется контролировать код во время выполнения.
Все эти операции, конечно же, можно автоматизировать, и это, вероятно, будет сделано в будущем.
Сейчас важно, что в composer будет добавлена поддержка предзагрузки, что избавит от необходимости самостоятельно создавать файлы для нее. Эту функцию очень легко настроить на сервере при условии, что он находится в полном вашем распоряжении.
Будете ли вы использовать предварительную загрузку в новой версии PHP 7.4? Появились мысли или замечания? Напишите мне в Twitter или по электронной почте.
Традиционно ждем ваши комментарии и плюсы, если считаете статью интересной 🙂
Русские Блоги
Автор: БРАЙАН ДЖЕКСОН
Сегодня мы изучим методы, которые могут значительно улучшить производительность страницы.Подсказки и инструкции по ресурсам. Возможно, вы слышали о preload, prefetch и preconnect, но мы хотим изучить немного глубже, выяснить разницу между ними и в полной мере использовать их. Преимущества, которые они приносят, включают в себя возможность интерфейсным разработчикам оптимизировать загрузку ресурсов, сокращать круговые пути и быстрее загружать ресурсы при просмотре страниц.
Preload
Разница между предварительной загрузкой и предварительной выборкой заключается в том, что она ориентирована наТекущая страница,а такжевысокий приоритетЗагрузка ресурсов, Prefetch фокусируется на ресурсах, которые будут загружены на следующей странице, и загружает их с низким приоритетом. Также обратите внимание, что предварительная загрузка не блокирует окно onload событие.
Преимущества использования предварительной загрузки
Преимущества использования директивы предварительной загрузки:
Например
Вот пример очень простого предварительно загруженного изображения:
Вот пример предварительной загрузки шрифтов. Помните: если для предварительной загрузки требуется междоменный запрос от CORS, вы также должны добавить атрибут crossorigin.
Вот пример предварительной загрузки таблиц стилей через HTML и JavaScript:
Скотт Джель из filament group также провел несколько исследований по теме и написалasync loaded styles using markup Это показывает, что предварительная загрузка не блокирует рендеринг страницы!
Браузерная поддержка Preload
В Chrome 50 добавлена поддержка Preload в апреле 2016 года, и такие браузеры, как Opera 37, также поддерживают ее. Однако Mozilla Firefox еще не решил поддерживать его, и Microsoft Edge Developer Edition, похоже, поддерживает его.
(Примечание переводчика, на рисунке ниже показана поддержка браузером предварительной загрузки на конец июля 2018 г.)
Вы можете прочитать о насpreload Углубленный анализ статьи.
Prefetch
Link Prefetching
Помимо Safari, iOS Safari и Opera Mini, современные браузеры уже поддерживают предварительную выборку ссылок, а Chrome и Firefox также будут отображать эти предварительно загруженные ресурсы на веб-панели.
(Примечание переводчика, на рисунке ниже показана поддержка браузером предварительной выборки ссылок в конце июля 2018 г.)
DNS Prefetching
Предварительная выборка DNS позволяет браузеруЗапустить разрешение DNS в фоновом режиме. Таким образом, разрешение DNS завершается, когда пользователь щелкает ссылку, поэтому задержка может быть уменьшена. Можно добавить в атрибуты тега ссылки rel=»dns-prefetch’ Чтобы выполнить предварительную выборку DNS для указанного URL, мы рекомендуем обрабатывать шрифты Google, Google Analytics и CDN.
Это также полезно для ресурсов, которые необходимо перенаправить, а именно:
Но следует отметить, что Chrome уже делал аналогичные вещи при нажатии на адресную строку, напримерDNS preresolve И TCP preconnect, это такие крутые меры! Вы можете пройти chrome://dns/ Чтобы увидеть свой список оптимизации.
Предварительная выборка DNS поддерживается всеми современными браузерами, кроме Opera Mini.
(Примечание переводчика, на рисунке ниже показана поддержка браузером DNS-prefetch в конце июля 2018 г.)
Prerendering
Предварительная отрисовка и предварительная выборка очень похожи. Они оптимизируют загрузку ресурсов на следующей странице, на которую можно перейти. Разница в том, что предварительная отрисовкаВся страница отображается в фоновом режиме, Все ресурсы всей страницы. следующим образом:
» prerender Запросы можно использовать для указания следующего HTML-кода, к которому нужно перейти: пользовательский агент будет получать и обрабатывать ресурсы в качестве ответа HTML. Чтобы использовать соответствующие типы контента для получения других типов контента или не требовать предварительной обработки HTML, вы можете использовать prefetch 。—— W3C»
Будьте осторожны при использовании предварительной визуализации, потому что она будет загружать много ресурсов и может привести к потере полосы пропускания, особенно на мобильных устройствах. Также обратите внимание, что вы не можете тестировать в Chrome DevTools, но в chrome://net-internals/#prerender Чтобы узнать, подготовлены ли какие-либо страницы, вы также можетеprerender-test.appspot.com провести тестирование.
Помимо браузеров Mozilla Firefox, Safari, iOS Safari, Opera Mini и Android, некоторые современные браузеры уже поддерживают предварительную отрисовку.
Помимо дополнительной загрузки ресурсов, в предварительной выборке есть всеДополнительные побочные эффекты, Например, нарушение конфиденциальности:
Вы можете прочитать о насprefetching Углубленный анализ статьи.
Preconnect
preconnect может быть добавлен непосредственно к атрибутам тега ссылки в HTML, или он может быть записан в заголовке HTTP или сгенерирован JavaScript. Ниже приведен пример использования preconnect для CDN:
Ниже приведен пример использования предварительного подключения для Google Fonts путем предоставления fonts.gstatic.com Добавьте запрос предварительного подключения, и браузер немедленно инициирует запрос и выполнит его параллельно с запросом CSS. В этом сценарииpreconnect исключает три RTT (время кругового обхода) из критического пути а такжеУменьшена задержка более чем на полсекунды, Ля Григорикeliminating RTTS with preconnect В статье более подробный анализ.
Вы можете прочитать о насpreconnect Углубленный анализ статьи.
подводить итоги
Я надеюсь, что теперь вы имеете некоторое представление о предварительной загрузке, предварительной выборке и предварительном подключении и знаете, как их использовать для ускорения загрузки ресурсов. Я надеюсь увидеть больше браузеров, поддерживающих эти запросы предварительной загрузки, и дальнейшую разработку в ближайшие месяцы Используй их.
Как вы понимаете эти советы по ресурсам? Вы пробовали их использовать? Добро пожаловать, чтобы оставить сообщение для обсуждения.