Ленивая загрузка (или «lazy loading») — это техника оптимизации производительности, при которой ресурсы (данные или файлы) загружаются по мере их необходимости, а не сразу. Это особенно полезно в современных веб-приложениях с большим объемом данных, таких как каталоги товаров, ленты новостей или любые другие приложения с бесконечным скроллом.

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

Пример ленивой загрузки можно найти в таких сценариях, как:

Социальные сети: Ленты новостей или комментарии под постами, которые загружаются по мере прокрутки страницы.
Онлайн-магазины: Загружаете первые 10 товаров, а остальные — по мере необходимости, по кнопке «Показать больше» или при прокрутке вниз.

Навигация по статье

Основные шаги при работе с ленивой загрузкой

Разделение данных на части (Pagination или Infinite Scroll)

Вместо загрузки всех данных сразу, их подгружают небольшими порциями. Это можно реализовать через постраничную навигацию (pagination) или через «бесконечный скролл» (infinite scroll).

Pagination: Пользователь нажимает на кнопку для загрузки следующей страницы данных.
Infinite Scroll: Данные автоматически загружаются при прокрутке страницы до конца.

Инициализация загрузки

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

Отслеживание состояния загрузки

Нужно отслеживать:

Сколько данных уже загружено (например, через смещение offset).
Количество данных, которое нужно загружать за один запрос (например, limit).
Флаг, указывающий, были ли загружены все данные (например, allDataLoaded).

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

Запрос данных по необходимости:

Когда пользователь выполняет действие (например, нажимает на кнопку для загрузки следующей порции данных), вы отправляете запрос на сервер с необходимыми параметрами, например offset и limit. Сервер возвращает только нужную часть данных.

Добавление новых данных к существующим:

Важно не перезаписывать уже загруженные данные, а добавлять новые к существующим. Это можно сделать через объединение массивов (например, с помощью оператора «spread»).

Пример:

this.data = [...this.data, ...newData];

Окончание загрузки

Когда сервер вернет меньше данных, чем указано в limit, или вернет пустой массив, это означает, что все данные были загружены. Вы устанавливаете флаг allDataLoaded = true, чтобы предотвратить дальнейшие запросы.

Оптимизация отображения

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

Пример использования в веб-приложении с Vue.js

Важные элементы

Хранилище данных (например, Pinia store):

Хранит список данных.
Хранит текущее смещение (offset) и количество загружаемых данных (limit).
Флаг для проверки, все ли данные загружены (allDataLoaded).

Метод для загрузки данных:

Запрашивает данные с сервера, передавая параметры пагинации.
Добавляет новые данные к уже существующим.

Кнопка для загрузки:

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

Пример реализации на Vue.js с использованием Pinia

// Pinia Store
export const useDataStore = defineStore("dataStore", {
  state: () => ({
    items: [],               // Все загруженные элементы
    offset: 0,               // Смещение для пагинации
    limit: 10,               // Количество элементов для загрузки за раз
    allDataLoaded: false,    // Флаг для окончания загрузки
  }),
  actions: {
    async loadMoreData() {
      if (this.allDataLoaded) return;  // Если все данные загружены, ничего не делаем

      const response = await fetch(`/api/data?offset=${this.offset}&limit=${this.limit}`);
      const newData = await response.json();

      if (newData.length < this.limit) {
        this.allDataLoaded = true; // Если данных меньше лимита, значит все загружено
      }

      this.items = [...this.items, ...newData]; // Добавляем новые данные к уже существующим
      this.offset += this.limit; // Увеличиваем смещение
    },
  },
});

Пример компонента Vue для кнопки загрузки

<template>
  <div>
    <div v-for="item in dataStore.items" :key="item.id">
      <!-- Отображаем каждый элемент -->
      <p>{{ item.name }}</p>
    </div>

    <button @click="loadMore" :disabled="dataStore.allDataLoaded">
      Загрузить еще
    </button>
  </div>
</template>

<script setup lang="ts">
import { useDataStore } from "../store/DataStore";
const dataStore = useDataStore();

async function loadMore() {
  await dataStore.loadMoreData();
}
</script>

Кэширование и ленивая загрузка

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

Когда кэширование полезно:

Частые переходы между страницами: Если пользователи часто возвращаются к предыдущим страницам или скроллят список данных назад и вперед, кэширование позволит избежать повторной загрузки данных с сервера. Это экономит время и ресурсы.
Повторное использование данных: Если одни и те же данные используются в разных частях приложения (например, список товаров на разных страницах), кэширование поможет избежать повторных запросов и ускорит загрузку.
Отсутствие частых изменений в данных: Если ваши данные редко обновляются или это статическая информация (например, список товаров или справочников), то кэширование данных будет полезно. Таким образом, вы снижаете нагрузку на сервер и повышаете производительность.
Работа в офлайн-режиме: Кэширование может помочь пользователям, если ваше приложение предполагает офлайн-доступ. Данные сохраняются в локальном хранилище (например, LocalStorage или IndexedDB), и пользователь может продолжать работать с уже загруженными данными без подключения к сети.

Когда кэширование не нужно:

Частые изменения данных: Если данные в вашем приложении часто обновляются, кэширование может привести к устаревшей информации у пользователя. В этом случае необходимо предусмотреть механизм автоматического обновления кэша, что усложняет логику приложения.
Малый объем данных: Если данные, которые вы загружаете лениво, достаточно малы по объему и не требуют значительных сетевых ресурсов, то кэширование может быть излишним. Проще загрузить данные заново, чем заниматься их сохранением и обновлением.
Одноразовая загрузка: Если данные используются только в течение одной сессии и не ожидается, что пользователь вернется к ним позже, кэширование не обязательно.

Как реализовать кэширование

В контексте Vue.js можно использовать localStorage или sessionStorage для сохранения данных в локальном кэше. Например, использать useStorage из библиотеки VueUse, которая упрощает работу с локальным хранилищем.

Пример сохранения данных в кэше с использованием useStorage:

import { useStorage } from '@vueuse/core';

// Pinia Store
export const useDataStore = defineStore("dataStore", {
  state: () => ({
    items: useStorage("cachedItems", []),  // Используем локальное хранилище
    offset: 0,
    limit: 10,
    allDataLoaded: false,
  }),
  actions: {
    async loadMoreData() {
      if (this.allDataLoaded) return;

      const response = await fetch(`/api/data?offset=${this.offset}&limit=${this.limit}`);
      const newData = await response.json();

      if (newData.length < this.limit) {
        this.allDataLoaded = true;
      }

      // Обновляем кэш вместе с состоянием
      this.items = [...this.items, ...newData];
      this.offset += this.limit;
    },
  },
});

Если данные, которые вы кэшируете, могут изменяться, нужно предусмотреть механизм для их обновления. Например, можно использовать:

Метки времени (timestamps): Проверять, как давно кэш был обновлен, и при необходимости перезагружать данные.
Версионирование данных: Хранить версию данных в кэше и проверять, соответствует ли версия на сервере текущей версии в кэше.