Прежде чем углубиться в семейство наблюдателей, поддерживаемых современными браузерами, давайте попробуем понять, что такое наблюдатель в целом?
Что такое Observer?
Observer - это программа, которая что-то наблюдает или замечает. Наблюдатели могут быть полезны, наблюдая за определенными действиями, происходящими в браузере, и реагируют соответствующим образом. Наблюдатели похожи на собак, наблюдающих за определенными действиями и предупреждающих нас, если происходит что-то необычное. И мы обязаны принять меры после того, как собаки предупредили нас об определенных действиях.
Используя наблюдателей, мы можем наблюдать за различными типами действий, происходящих в браузере, и предпринимать необходимые действия. Например, мы можем наблюдать, отображается ли видео в порту просмотра и разрешено ли автовоспроизведение, если дочерний элемент был добавлен или удален из родительского элемента DOM, если размер / размеры элемента коробки изменились и так далее.
Ниже приведены четыре различных типа наблюдателей, поддерживаемых современными браузерами.
- Наблюдатель за перекрестком
- Наблюдатель за мутациями
- Наблюдатель за производительностью
- Изменить размер наблюдателя
- Наблюдатель за пересечением
Используется для наблюдения за пересечением двух элементов HTML DOM. Полезно наблюдать за элементом в вашей модели DOM, когда он входит в видимое окно просмотра или покидает его. Некоторые из вариантов использования Intersection Observer описаны ниже.
- Ленивая загрузка изображений или других ресурсов, когда элемент виден в области просмотра.
- Определение видимости рекламы и расчет доходов от рекламы.
- Реализация веб-сайтов с бесконечной прокруткой (например, статей forbes), когда пользователь прокручивает страницу вниз, чтобы ему не приходилось перемещаться по разным страницам.
- Загрузка и автовоспроизведение видео или анимации, когда элемент находится в области просмотра.
Поддержка браузера: в настоящее время Firefox и Chrome поддерживают Intersection Observer, но мы можем найти полифиллы для старых браузеров.
Использование IntersectionObserver api в основном требует трех шагов
а) Создание наблюдателя
б) Определение целевого объекта для наблюдения
в) Определение обработчика обратного вызова
a) Создание наблюдателя
Его можно создать, просто вызвав функцию-конструктор IntersectionObserver и передав функцию обработчика и параметры конфигурации.
Порог [0,3] означает, что когда целевой элемент виден на 30% в элементе, заданном корневым элементом, вызвать функцию-обработчик. Это означает, что функция обработчика / обратного вызова вызывается всякий раз, когда элемент виден на 30%, 50%, 80% и 100%.
б) Определение целевого объекта для наблюдения
Мы можем определить несколько целевых объектов для наблюдения. Как упоминалось в предыдущем примере, собака должна знать, что наблюдать, прежде чем предупреждать всех.
Любой целевой элемент можно наблюдать, просто вызвав метод .observe (target) соответствующего наблюдателя.
c) Определение обработчика обратного вызова
Это ответ, который нужно сделать, когда вы замечаете предупреждение о том, что произошло что-то обычное. Обработчик обратного вызова запускается всякий раз, когда целевой элемент пересекается с корневым элементом по пороговым значениям.
Я подготовил демонстрацию, в которой IntersectionObserver используется для изменения цвета целевого окна, когда он виден в видимой области, когда пользователь прокручивает вверх.
Ссылки: Демо, Intersection Observer Api
2. Наблюдатель за мутациями
Наблюдатели за мутациями используются для наблюдения изменений в элементах DOM. Полезно наблюдать за изменениями, такими как добавление или удаление дочерних узлов в родительском узле, изменения значений атрибутов или содержимого данных и т. Д. До MutationObserver события изменения DOM обрабатывались событиями мутации, такими как DOMAttrModified, DOMAttributeNameChanged, DOMNodeInserted.
Наблюдатель мутаций разработан как замена Событиям мутаций, определенным в спецификации событий DOM3. Практические причины, по которым следует избегать событий мутации, - это проблемы с производительностью и кроссбраузерность.
Вероятно, самая большая аудитория этого нового api - это люди, создающие JS-фреймворки, в основном для решения проблем и создания взаимодействий. Другой вариант использования - это ситуация, когда вы используете фреймворки, которые манипулируют DOM, и вам нужно эффективно реагировать на эти изменения (и без хаков setTimeout).
Поддержка браузера. У него довольно хорошая поддержка в разных браузерах.
В общем, реализация MutationObserver требует трех шагов
а) Создание наблюдателя
Его можно создать, просто вызвав его конструктор и передав функцию обработчика и параметры конфигурации. У нас есть возможность указать, какие изменения мы хотим отслеживать или наблюдать.
childList: true означает наблюдение за изменениями, относящимися к дочерним узлам, attributes: true означает наблюдение за изменением атрибута, characterData: true означает наблюдение за изменениями в содержимом данных целевого элемента.
б) Определение целевого объекта для наблюдения.
Метод Observer.observe (…) принимает целевой элемент, за которым следует наблюдать.
c) Определение обработчика обратного вызова
В зависимости от конфигурации, используемой в процессе создания наблюдателя, функция обратного вызова выполняется всякий раз, когда в целевом элементе происходят изменения. Функция обратного вызова запускается с объектом записи мутации, который содержит тип мутации, произошедшей в целевом элементе.
Я подготовил демонстрацию, которая запускает обработчик обратного вызова наблюдателей мутаций всякий раз, когда новый дочерний узел добавляется или удаляется вместе с изменением атрибута.
Ссылки: Демо, Mutation Observer Api
4. Наблюдатель за производительностью
Он используется для наблюдения за временной шкалой производительности и получения уведомлений о новых записях производительности по мере их записи браузером. Его можно использовать для измерения определенных показателей производительности как в браузере, так и в приложениях nodejs. В браузере мы можем получить доступ к наблюдателю, используя объект Window как window.PerformanceObserver, а в приложении nodejs мы должны потребовать perf_hooks для получения объекта производительности. Например, const {performance} = require (‘perf_hooks’); Это может быть полезно в следующих случаях
- Измерьте время обработки между запросом и ответом. (В браузере)
- Рассчитайте продолжительность при извлечении данных из базы данных. (В приложении nodejs)
- Получите точную информацию о времени с помощью Paint Timing Api, например, время для первой отрисовки или первой отрисовки с полным содержанием.
- Доступ к показателям производительности с помощью User Timing API, Navigation Timing API, Network Information API, Resource Timing API, Paint Timing API
Для реализации PerformanceObserver требуется три шага
а) Создание наблюдателя
Его можно создать, просто вызвав его конструктор и передав функцию-обработчик.
б) Определение целевого объекта для наблюдения.
Метод Observer.observe (..) принимает допустимый набор типов записей, которые можно наблюдать. Эти типы записей могут принадлежать различным api производительности, таким как api пользовательского времени или времени навигации. Допустимые значения entryType: "mark” [USER-TIMING], "measure" [USER-TIMING], "navigation" [NAVIGATION-TIMING-2], "resource" [RESOURCE-TIMING].
c) Определение обработчика обратного вызова
Обработчик обратного вызова запускается всякий раз, когда в приложении используется наблюдаемое событие. Например, его можно использовать для отметки момента и измерения продолжительности от начала до момента окончания.
Не стесняйтесь поэкспериментировать с простой демонстрацией, в которой используется API PerformanceObserver. Когда пользователь нажимает кнопку, он отмечает момент как начало и конец и измеряет продолжительность. после 3000 мс. Вывод можно просмотреть в консоли.
Ссылки: Демо, Ирина Шестак: рассказывание историй с помощью Performance Observers - JSConf.Asia 2018, Performance Observer Api, NodeJS perf_hooks api
3. Resize Observer
Resize Observer позволяет нам отслеживать изменения размера прямоугольника содержимого (ширины, высоты) элементов DOM и реагировать соответствующим образом. Это похоже на события document.onresize () или window.resize () для элементов. Это полезно, когда элемент меняет свой размер без изменения размера главного окна. Например, добавление новых дочерних элементов, установка для свойства элемента display значения none или аналогичные действия могут изменить размер элемента, его братьев и сестер или предков. Он только наблюдает за содержимым коробки. Некоторые действия наблюдателей изменения размера описаны ниже.
- Наблюдение будет срабатывать, когда наблюдаемый элемент вставляется / удаляется из DOM.
- Наблюдение будет срабатывать, если для параметра «Отображение наблюдаемых элементов» установлено значение «Нет».
- наблюдения не запускаются для незамещенных встроенных элементов.
- наблюдения не будут запускаться преобразованиями CSS.
- Наблюдение будет срабатывать, когда начинается наблюдение, если у элемента есть отображение, а размер элемента не 0,0.
Наблюдатель изменения размера уведомляет о размерах поля содержимого, как показано на рисунке ниже.
Поддержка браузера: в настоящее время он не поддерживается большинством браузеров, кроме Chrome ≥ 64.
API наблюдателя можно использовать в три этапа, как и другие наблюдатели.
а) Создание наблюдателя
Его можно создать, просто вызвав его конструктор и передав функцию-обработчик.
б) Определение целевого объекта для наблюдения
Определите целевой объект, изменение размера которого необходимо наблюдать.
c) Определение обработчика обратного вызова
Ссылки: Демо, Изменение размера использования обозревателя.
Пожалуйста, дайте мне знать, если у вас есть какие-либо мысли / предложения / улучшения относительно этих наблюдателей.
Первоначально опубликовано на zeolearn.com
