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

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

Что такое отложенная загрузка?

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

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

Преимущества отложенной загрузки

Более быстрое время загрузки: Поскольку выборка и загрузка ресурсов являются приоритетными, при первой загрузке страницы время начальной загрузки значительно сокращается Улучшенный пользовательский опыт: Представьте, что вы открываете веб-страницу и ждете до минуты, пока она полностью загрузится. Поскольку ресурсы загружаются только тогда, когда они необходимы, этой проблемы можно легко избежать. Отложенная загрузка сокращает время ожидания, тем самым повышая удовлетворенность клиентов. Сокращение использования полосы пропускания: полоса пропускания - это объем данных, который передается между клиентом и сервером в секунду. Отложенная загрузка значительно сокращает использование полосы пропускания, поскольку не все ресурсы загружаются одновременно Повышение производительности: Когда страницы загружается слишком много, браузеру требуется время, чтобы убедиться, что содержимое отображается так, как оно должно быть. Иногда это может привести к плохому отображению макетов и снижению производительности. При использовании метода отложенной загрузки браузерам не нужно выполнять слишком много работы, чтобы обеспечить правильную загрузку страницы

Недостатки отложенной загрузки

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

Что такое быстрая загрузка?

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

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

Преимущества быстрой загрузки

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

Недостатки быстрой загрузки

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

Различия между ленивой и активной загрузкой

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

Фреймворки для одностраничных приложений (SPA), такие как React, по умолчанию используют методы отложенной и ускоренной загрузки. Используя Suspense и React.Функция отложенной загрузки в React, мы можем увидеть, как загрузить компонент по желанию, нажав кнопку.

Допустим, у нас есть компонент, который нам нужно использовать в дальнейшем в нашем приложении. Мы реализуем это как компонент, загружаемый одним нажатием кнопки. Давайте назовем компонент MyLazyComponent:

const MyLazyComponent = () => {
  return (
    <div>
        <p>Look, I am the lazy component that is loaded after a button           click</p>
    </div>
  )
}
export default MyLazyComponent

Теперь, когда у нас есть компонент для отложенной загрузки, давайте посмотрим, как React реализует отложенную загрузку с помощью встроенной функции React.функция отложенной загрузки:

import React, { Suspense, useState } from "react"

const LazyComponent = React.lazy(() => import('./MyLazyComponent'))

function App() {
  const [showComponent, setShowComponent] = useState(false)
  return (
    <>
      <h1>Lazy component example</h1>
      <button onClick={() => setShowComponent(true)}>Load Component</button>

      <Suspense fallback={<div>Loading component...</div>}>
        {showComponent && <LazyComponent/>}
      </Suspense>

    </>
  );
}

export default App

В нашем файле App.jsx мы создаем переменную LazyComponent, которая использует функцию React.lazy() для динамического вызова созданного нами ранее компонента MyLazyComponent. У нас есть состояние showComponent, которое инициализируется значением false и устанавливается в true при нажатии кнопки. Как только состояние showComponent устанавливается в true, MyLazyComponent загружается на страницу. Встроенный компонент Suspense предоставляет резервный пользовательский интерфейс на случай, если MyLazyComponent находится в процессе загрузки.

С исходным кодом мы не можем увидеть эффект от использования резервного пользовательского интерфейса, поскольку компонент с отложенной загрузкой загружается слишком быстро. Давайте смоделируем задержку при загрузке отложенного компонента. Используя promise, мы можем использовать функцию setTimeout, чтобы вызвать двухсекундную задержку. Мы используем promise здесь, потому что работаем с динамическим импортом:

const LazyComponent = React.lazy(
  () =>
    new Promise((resolve) => {
      setTimeout(() => resolve(import("./MyLazyComponent")), 2000);
    })
);

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

Однако интересно отметить, что даже без использования функции React.функция отложенной загрузки может быть запущена и показывать те же результаты. Однако это противоречит цели отложенной загрузки, поскольку компонент по-прежнему загружается в фоновом режиме. Реагировать.функция lazy важна, потому что она позволяет нам динамически импортировать компонент и использовать его только при необходимости, не включая его в исходный пакет приложений. В этом весь смысл отложенной загрузки. Без React.lazy MyLazyComponent по-прежнему включен в исходный пакет приложений.

Быстрая загрузка в React

Ускоренная загрузка - это поведение по умолчанию для загрузки компонентов в React, которое может быть реализовано с помощью перехватчиков useEffect или обычного импорта компонентов. Если бы нам пришлось реорганизовать наш код выше, чтобы продемонстрировать ускоренную загрузку, мы бы сделали это следующим образом.

У нас есть MyLazyComponent, который преобразуется в MyEagerComponent:

const MyEagerComponent = () => {
  return (
    <div>
        <p>I am an eager-loaded component, hello.</p>
    </div>
  )
}

export default MyEagerComponent

А что касается нашего приложения.jsx:

import MyEagerComponent from "./MyEagerComponent";

function App() {
 
  return (
    <>
      <h1>Eager component example</h1>
      <MyEagerComponent/>    

    </>
  );
}

export default App

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

Вывод

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

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

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