Prefetch стратегии

Prefetch в Unpoly — это механизм предварительной загрузки содержимого страниц или фрагментов, который позволяет значительно ускорить пользовательский интерфейс за счет уменьшения задержки при переходах. Prefetch не заменяет обычные HTTP-запросы, а работает как кэширование потенциально необходимых ресурсов, загружая их заранее.

Основные концепции Prefetch

  1. Событие наведения и видимости Unpoly поддерживает автоматический prefetch на основе интеракций пользователя:

    • Наведение курсора (hover): если ссылка помечена атрибутом up-preload, Unpoly выполняет запрос на загрузку содержимого, когда пользователь наводит курсор на ссылку.
    • Предварительное отображение (viewport): элементы, появляющиеся в области видимости, могут инициировать prefetch без прямого взаимодействия пользователя.

  2. Атрибуты для Prefetch

    • up-preload: основной атрибут для указания, что ссылка или кнопка должны предварительно загружать содержимое.
    • up-preload-delay: задает задержку перед выполнением prefetch, чтобы избежать лишней нагрузки на сервер.
    • up-preload-target: позволяет указать контейнер, в который будет загружаться контент, даже если он еще не отображается.

  3. Кэширование Unpoly хранит результат prefetch в памяти, чтобы при последующем переходе не делать повторный запрос. Это позволяет:

    • Мгновенно обновлять целевой контейнер без повторной загрузки с сервера.
    • Уменьшить сетевой трафик при повторных посещениях.

Настройка и контроль Prefetch

Глобальная настройка:

up.prefetch.config({
  enabled: true,
  delay: 150,        // миллисекунды перед запуском prefetch
  maxConcurrency: 4  // максимальное количество параллельных prefetch-запросов
});
  • enabled — включает или отключает глобально механизм prefetch.
  • delay — минимальная задержка перед отправкой запроса, чтобы избежать лишней нагрузки при случайных наведениях.
  • maxConcurrency — ограничение количества одновременных prefetch-запросов, предотвращающее перегрузку сети.

Локальная настройка для конкретной ссылки:

<a href="/profile" up-preload up-preload-delay="200" up-preload-target="#main-content">
  Профиль
</a>
  • Запрос на /profile будет выполнен через 200 мс после наведения курсора, результат будет сохранен и использован для обновления контейнера #main-content.

Сценарии использования Prefetch

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

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

  3. Формы и модальные окна Контент форм и модальных окон может быть загружен заранее, чтобы при открытии модального окна данные уже были доступны без задержки.

События Prefetch

Unpoly предоставляет события для контроля поведения prefetch:

  • up:prefetch:before — вызывается перед отправкой запроса, можно изменить URL или параметры.
  • up:prefetch:load — срабатывает при успешной загрузке данных.
  • up:prefetch:fail — вызывается при ошибке загрузки.
  • up:prefetch:done — окончание prefetch, независимо от успеха или ошибки.

Пример обработки события:

up.on('up:prefetch:before', function(event) {
  if(event.target.matches('a.special-link')) {
    event.request.url += '?cache_bust=' + Date.now();
  }
});

Рекомендации по производительности

  • Использовать up-preload-delay для предотвращения лишних запросов при случайных наведениях.
  • Ограничивать maxConcurrency, особенно на мобильных устройствах с ограниченной пропускной способностью.
  • Не использовать prefetch для тяжелых ресурсов, которые редко открываются, чтобы не перегружать сеть и память.
  • Комбинировать prefetch с кэшированием, чтобы повторные переходы были мгновенными.

Особенности взаимодействия с другими механизмами Unpoly

  • Prefetch автоматически интегрируется с up-target, up-transition и up-scroll, что позволяет плавно отображать предварительно загруженный контент.
  • Если пользователь быстро переходит по ссылке до завершения prefetch, Unpoly отменяет текущий запрос и выполняет новый для целевого контейнера.
  • Prefetch можно отключать для отдельных элементов через up-preload="false".

Продвинутые техники

  1. Условный Prefetch Можно запускать prefetch только при выполнении определенного условия:
up.on('up:prefetch:before', function(event) {
  if(!userIsLoggedIn) {
    event.preventDefault(); // отменяем prefetch
  }
});

  1. Комбинированный prefetch и pushState Prefetch можно использовать вместе с историей браузера: предварительно загруженные страницы сразу же заменяют состояние при навигации, обеспечивая почти мгновенный отклик.

  2. Аналитика и мониторинг Отслеживание успешных и неудачных prefetch-запросов позволяет оптимизировать стратегию загрузки и управлять приоритетами ресурсов.

Prefetch в Unpoly обеспечивает эффективное предзагрузка контента, уменьшает задержки интерфейса и плавно интегрируется с другими возможностями библиотеки. Правильная настройка атрибутов, событий и ограничений позволяет создавать быстрые и отзывчивые веб-приложения.

Оглавление