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

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

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

Итак, мы согласились с тем, что отложенная загрузка может повысить производительность. Как нам это реализовать? Один из способов - использовать обработчики событий, такие как scroll, для загрузки содержимого только тогда, когда пользователь достиг определенной точки на странице, или с помощью периодического таймера и вызова getBoundingClientRect() для рассматриваемых элементов. Однако современные браузеры, включая Chrome, предлагают более эффективный метод проверки того, какие элементы находятся в поле зрения пользователя, с помощью API-интерфейса наблюдателя пересечения. Создание IntersectionObserver позволит вам узнать, когда наблюдаемый элемент входит в область просмотра браузера или выходит из нее. Наблюдать за элементом так же просто, как регистрировать наблюдателя на этих элементах, как показано в примере ниже:

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

Обратите внимание на атрибут class, который будет использоваться для выбора элемента; src, который ссылается на изображение-заполнитель, которое пользователь увидит при начальной загрузке страницы; а также data-src и data-srcset, которые представляют собой атрибуты-заполнители, содержащие URL-адрес изображения, которое будет загружаться после появления элемента на экране пользователя. Мы можем добавить наблюдателя пересечения, чтобы наблюдать за элементом и лениво загружать изображения следующим образом:

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

  • Когда происходит событие DOMContentLoaded, выполняется запрос для всех <img> элементов с классомlazy, которые затем сохраняются в массиве lazyImages.
  • Мы смотрим, поддерживает ли браузер пользователя API-интерфейс отслеживания пересечений. Если это так, создается новый наблюдатель, который содержит обратный вызов.
  • Наблюдатель выполняет обратный вызов для каждого из элементов в lazyImages, когда они входят в область просмотра пользователя. В этом случае изображение-заполнитель заменяется изображениями в наборе данных, когда элемент появляется в поле зрения.

Предостережение: не все браузеры поддерживают наблюдателя пересечений, поэтому вы можете добавить условие else, которое использует методы, совместимые со старыми браузерами, например обработчики событий. Подробный ресурс, который включает способы сделать это (и который в значительной степени проинформировал этот пост), - это Ленивая загрузка изображений и видео, предоставляемый Web Fundamentals на сайте Google Developers. Не стесняйтесь также взглянуть на демонстрацию CodePen, чтобы увидеть пример отложенной загрузки в действии.

Спасибо за прочтение!

Источники: