От создателя: в данной для нас статье мы узнаем больше о 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 может посодействовать нам. Во-1-х, давайте мало разберемся с отложенной загрузкой, потом мы разглядим, как работает Intersection Observer API.
Как работает отложенная загрузка?
Отложенная загрузка — это способ рендеринга контента в Вебе. Заместо рендеринга всей странички за один раз и предоставления юзеру худшего опыта, теория отложенной загрузки заключается в загрузке лишь нужных частей и задержке других до того времени, пока они не потребуются юзеру.
Примером отложенной загрузки, о которой вы, может быть, слышали и, может быть, употребляли в собственных приложениях, является нескончаемая прокрутка. Нескончаемые прокрутки работают последующим образом: юзер входит на сайт, загружает исходную страничку контента и, лишь когда он прокручивает страничку, загружается больше контента. Таковым образом, нет необходимости загружать все сходу и получить тяжелое приложение.
Итак, если отложенная загрузка — это способ рендеринга лишь того контента, который пригодится юзеру, что представляет собой оборотный термин? Некие люди, может быть, слышали о отложенной загрузке ранее, но не знают буквально, что является оборотным действием. Противоположность отложенной загрузке именуется незамедлительной загрузкой — когда юзер входит на ваш веб-сайт, ему сходу показывает весь контент.
Понимаете ли вы, что в Интернет возник новейший атрибут loading, потому мы можем загружать изображения отложено? Чтоб употреблять это, все, что для вас необходимо сделать, это передать loading=lazy элементу img либо iframe.
При использовании данной для нас техники мы получаем много преимуществ: загрузка ресурсов при необходимости уменьшает потребление времени и внедрение памяти, если отображается лишь одна часть странички, а это значит, что время загрузки странички сокращается. Это также помогает избежать рендеринга ненадобного кода, что улучшает приложения, в особенности для гостей, которые употребляют неспешные сетевые подключения. Но у этого также есть некие недочеты, такие как: это может воздействовать на рейтинг веб-сайта в поисковых системах, и также будет нужно некое время, чтоб верно воплотить отложенную загрузку, используя пригодные библиотеки либо API.
Intersection Observer API
В протяжении почти всех лет JavaScript развивался так стремительно, что мы получали новейшие веб-API практически любой год, и преимущество этих новейших веб-API заключается в разработке наиболее высококачественных и наиболее симпатичных приложений и веб-страниц.
Intersection Observer — это API, который мы можем употреблять для отслеживания видимости и положения частей DOM. Сущность в том, что они доставляется асинхронно, что делает API вправду полезным для осознания видимости частей, потому мы можем воплотить подготовительную и отложенную загрузку контента DOM.
GoogleBot не отвечает за показатели Core Web Vitals
Если мы вернемся на несколько годов назад, у нас не было API либо чего-то подобного для расчета и отслеживания положения элемента. Огромную часть времени мы имели дело с безумными и большущими функциями, создавая накладные способы, доставляющие больше заморочек, чем полезности. При помощи Intersection Observer API мы можем создавать вправду достойные внимания вещи, почти все из которых обширно употребляются в наше время, к примеру:
Нескончаемые прокрутки — при помощи этого API создавать нескончаемые прокрутки, такие как таблицы, списки, сетки и т. д. проще, чем когда-либо.
Изображения — нет необходимости показывать все изображения на интернет-странице сразу; вы сможете отложено загружать изображения и показывать лишь те изображения, которые нужны юзеру на этот момент.
Мониторинг частей — вы сможете выслеживать элементы на страничке; вы сможете созидать, показываются ли они для юзера. По сути это касается рекламы на страничке, потому вы сможете указать, когда обязана отображаться реклама.
Ах так мы можем начать употреблять Intersection Observer API:
JavaScript let myFirstObserver = new IntersectionObserver(callback, options);
| 1 | let myFirstObserver = new IntersectionObserver(callback, options); |
Поначалу мы вызываем конструктор IntersectionObserver, он воспринимает два параметра. Во-1-х, это функция оборотного вызова, которая вызывается, когда элемент заходит в область просмотра устройства либо определенный элемент; параметр options является объектом, и этот объект контролирует происшествия того, как будет вызван оборотный вызов. Объект options имеет последующие поля:
root — Родительский элемент, который употреблялся в качестве области просмотра мотивированного элемента.
rootMargin — Поле вокруг корневого элемента, он воспринимает значения, подобные свойствам полей CSS. Эти значения могут возрастать либо уменьшаться с каждой стороны границы корневого элемента перед вычислением пересечения.
threshold — Это быть может число либо массив чисел, он показывает, какой процент видимости цели должен вызывать функцию оборотного вызова.
Итак, давайте используем Intersection Observer API. Мы собираемся поначалу войти в консоль всякого элемента.
JavaScript 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);
Продажи образовательных товаров через сайты СМИ и блоги выросли на 900%
| 12345678 | 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, передавая мотивированной элемент:
JavaScript let myDivTarget = document.querySelector(‘.header’);
observer.observe(myDivTarget);
| 123 | 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
Редакция: Команда webformyself.
Источник