От автора: в этой статье мы узнаем больше о Intersection Observer API, новом и мощном API, теперь поддерживаемом современными браузерами, который помогает отложено загружать изображения и другие элементы на веб-страницах. Мы можем использовать этот API, чтобы определить видимость элементов и реализовать предварительную и отложенную загрузку содержимого DOM.
В течение многих лет Веб развивался, браузеры постоянно реализуют множество новых функций и API, но время от времени разработчики все еще испытывают проблемы при рендеринге контента в DOM. Когда мы запускаем новое приложение, создаем компоненты, думаем о структуре HTML, указываем стили CSS, мы уже думаем о процессе рендеринга, о том, как будет выглядеть макет страницы, и о некоторых важных частях, которые мы должны наблюдать, чтобы получить оптимальный рендеринг в приложении.
Это имеет большое значение в приложении, в том, как мы собираемся создавать элементы, как мы собираемся организовать CSS, какие библиотеки и фреймворки мы будем использовать, и т. д. Вот почему рендеринг по-прежнему остается актуальной темой для разработчиков.
Одна из причин, по которой библиотека React, созданная Facebook в 2011 году, стала настолько популярной в сообществе веб-разработчиков, заключается в том, что эта библиотека работает с так называемым виртуальным DOM. По сути, это виртуальное представление DOM, которым вы можете манипулировать и обновлять по своему усмотрению. Затем, после всех обновлений, виртуальная DOM рассматривает конкретные изменения, которые необходимо внести в исходную DOM, и применяет эти изменения оптимизированным способом, поэтому вам не придется обновлять всю страницу, когда изменения были внесены только в один элемент. Это одно из основных преимуществ React по сравнению с другими библиотеками и средами. Рендеринг контента в DOM — это тяжелая работа и затратная задача, но React позволяет выполнить ее лучше и быстрее.
Некоторые библиотеки или API могут улучшить отображение элементов в приложениях. Вот почему мы собираемся узнать больше об Intersection Observer API и рассмотреть, как этот новый API может помочь нам. Во-первых, давайте немного разберемся с отложенной загрузкой, затем мы рассмотрим, как работает Intersection Observer API.
Как работает отложенная загрузка?
Отложенная загрузка — это метод рендеринга контента в Интернете. Вместо рендеринга всей страницы за один раз и предоставления пользователю худшего опыта, концепция отложенной загрузки заключается в загрузке только необходимых частей и задержке остальных до тех пор, пока они не потребуются пользователю.
Примером отложенной загрузки, о которой вы, возможно, слышали и, возможно, использовали в своих приложениях, является бесконечная прокрутка. Бесконечные прокрутки работают следующим образом: пользователь заходит на веб-сайт, загружает начальную страницу контента и, только когда он прокручивает страницу, загружается больше контента. Таким образом, нет необходимости загружать все сразу и получить тяжелое приложение.
Итак, если отложенная загрузка — это метод рендеринга только того контента, который понадобится пользователю, что представляет собой обратный термин? Некоторые люди, возможно, слышали об отложенной загрузке раньше, но не знают точно, что является обратным процессом. Противоположность отложенной загрузке называется немедленной загрузкой — когда пользователь заходит на ваш сайт, ему сразу отображает весь контент.
Знаете ли вы, что в Веб появился новый атрибут loading, поэтому мы можем загружать изображения отложено? Чтобы использовать это, все, что вам нужно сделать, это передать loading=lazy элементу img или iframe.
При использовании этой техники мы получаем много преимуществ: загрузка ресурсов по мере необходимости уменьшает потребление времени и использование памяти, если отображается только одна часть страницы, а это означает, что время загрузки страницы сокращается. Это также помогает избежать рендеринга ненужного кода, что оптимизирует приложения, особенно для посетителей, которые используют медленные сетевые подключения. Но у этого также есть некоторые недостатки, такие как: это может повлиять на рейтинг сайта в поисковых системах, и также потребуется некоторое время, чтобы правильно реализовать отложенную загрузку, используя подходящие библиотеки или API.
Intersection Observer API
На протяжении многих лет JavaScript развивался так быстро, что мы получали новые веб-API почти каждый год, и преимущество этих новых веб-API заключается в создании более качественных и более привлекательных приложений и веб-страниц.
Intersection Observer — это API, который мы можем использовать для отслеживания видимости и положения элементов DOM. Суть в том, что они доставляется асинхронно, что делает API действительно полезным для понимания видимости элементов, поэтому мы можем реализовать предварительную и отложенную загрузку контента DOM.
Если мы вернемся на несколько лет назад, у нас не было API или чего-то подобного для расчета и отслеживания положения элемента. Большую часть времени мы имели дело с сумасшедшими и огромными функциями, создавая затратные методы, доставляющие больше проблем, чем пользы. С помощью Intersection Observer API мы можем создавать действительно интересные вещи, многие из которых широко используются в наше время, например:
Бесконечные прокрутки — с помощью этого API создавать бесконечные прокрутки, такие как таблицы, списки, сетки и т. д. проще, чем когда-либо.
Изображения — нет необходимости отображать все изображения на веб-странице одновременно; вы можете отложено загружать изображения и отображать только те изображения, которые необходимы пользователю в данный момент.
Мониторинг элементов — вы можете отслеживать элементы на странице; вы можете видеть, отображаются ли они для пользователя. На самом деле это касается рекламы на странице, поэтому вы можете указать, когда должна отображаться реклама.
Вот как мы можем начать использовать Intersection Observer API:
let myFirstObserver = new IntersectionObserver(callback, options);
Сначала мы вызываем конструктор IntersectionObserver, он принимает два параметра. Во-первых, это функция обратного вызова, которая вызывается, когда элемент входит в область просмотра устройства или определенный элемент; параметр options является объектом, и этот объект контролирует обстоятельства того, как будет вызван обратный вызов. Объект options имеет следующие поля:
root — Родительский элемент, который использовался в качестве области просмотра целевого элемента.
rootMargin — Поле вокруг корневого элемента, он принимает значения, аналогичные свойствам полей CSS. Эти значения могут увеличиваться или уменьшаться с каждой стороны границы корневого элемента перед вычислением пересечения.
threshold — Это может быть число или массив чисел, он указывает, какой процент видимости цели должен вызывать функцию обратного вызова.
Итак, давайте используем Intersection Observer API. Мы собираемся сначала войти в консоль каждого элемента.
let options = { root: document.querySelector('.scroll-list'), rootMargin: '5px', threshold: 0.5 }; let myFirstObserver = new IntersectionObserver(elements => { elements.forEach(element => console.log("element", element)); }, options);Теперь, чтобы начать «наблюдать» элемент, все, что нам нужно сделать, это получить конкретную цель, которая нам нужна, а затем вызвать observer с функцией observe, передавая целевой элемент:
let myDivTarget = document.querySelector('.header'); observer.observe(myDivTarget);Следует помнить, что все элементы, наблюдаемые Intersection Observer API, являются прямоугольниками; элементы неправильной формы считаются занимающими наименьший прямоугольник, охватывающий все части элемента.
Но что насчет поддержки Intersection Observer API? Действительно ли браузеры поддерживают этот новый API? Ответ таков: если вы не собираетесь разрабатывать для IE или какого-то действительно старого браузера, вы можете использовать его, не беспокоясь, поскольку API поддерживается в последних версиях самых популярных браузеров, таких как Chrome, Edge, Firefox и Opera.
Если вы собираетесь работать с большим количеством данных, например с таблицей с большим количеством информации, интерфейс Intersection Observer API может быть чрезвычайно полезен для отображения только того контента, который нужен пользователю, и не требует дополнительных затрат.
Одним из преимуществ этого API является то, что вам больше не нужно использовать библиотеку для такой работы. Большинство браузеров предоставляют поддержку для некоторых из самых новых и замечательных API, и это улучшило работу пользователей в целом, позволяя разработчикам использовать некоторые собственные браузерные API и уменьшая их окончательный пакет кода.
Заключение
В этой статье мы узнали об Intersection Observer API и о том, как этот API может помочь создавать более совершенные страницы путем их отложенной загрузки, отслеживания положения элементов DOM и т. д. Этот API особенно полезен для сокращения времени рендеринга, предоставления пользователям с медленным сетевым подключением возможности отображения только того контента, который им нужен.
Не прекращайте на этом свое обучение — продолжайте изучать и узнавать больше об этом API, создайте несколько потрясающих веб-страниц и почувствуйте, как этот API может помогать вам в ежедневной работе.
Автор: Leonardo Maldonado
Источник: https://www.telerik.com
Редакция: Команда webformyself.