Отложенная загрузка с помощью @defer

Блок at-defer отложенно загружает часть шаблона и его зависимости, повышая производительность первоначальной загрузки. Отложенное содержимое выделяется в отдельный фрагмент.

Поместите содержимое в блок at-defer. По умолчанию оно загружается, когда браузер простаивает.

Откладывание тяжёлых компонентов или компонентов, расположенных ниже области просмотра, сохраняет первоначальный пакет небольшим и ускоряет первую отрисовку. Компонент загружается только тогда, когда он действительно нужен.

Блок заполнителя показывает содержимое до срабатывания отложенного блока.

Блок загрузки отображается во время загрузки отложенного фрагмента.

Блок ошибки отображается, если загрузить отложенные зависимости не удалось.

Вы управляете началом загрузки с помощью триггеров в предложении on, например при простое, при появлении в области просмотра, при взаимодействии, при наведении или по таймеру.

Триггер при появлении в области просмотра загружает содержимое, когда оно прокручивается в видимую область. Это особенно удобно для разделов, расположенных ниже начальной области страницы.

При взаимодействии содержимое загружается, когда пользователь нажимает на заполнитель или переводит на него фокус; при наведении содержимое загружается, когда указатель находится над ним.

Вы также можете запускать загрузку по логическому выражению с помощью when: загрузка начнётся, когда выражение станет истинным.

Вы можете предварительно загрузить отложенный фрагмент отдельно от его отображения, например выполнить предварительную загрузку при простое, чтобы фрагмент был готов до срабатывания триггера отображения.

Запуск отложенного содержимого.

Вы изучили блок at-defer для отложенной загрузки, а также блоки at-placeholder, at-loading и at-error и такие триггеры, как on idle, on viewport, on interaction, on hover, on timer и when, включая предварительную загрузку. Вы завершили курс «Встроенное управление потоком».