Очередная веха эволюции браузеров в 2017 году: Intersection Observer

[Mithgol the Webmaster]

Эволюция браузеров в 2017 году, безусловно, идёт гораздо менее быстрыми шагами
по сравнению со временами &+AKs-;браузерных войн&+ALs-; девяностых годов
или временами первоначального развития мобильных браузеров в двухтысячных.

Но, несмотря на это, эволюция браузеров не остановилась, и в 2017 году одним из
наиболее впечатляющих её результатов является программный интерфейс (API),
известный как Intersection Observer (в переводе с английского языка ── средство
наблюдения за пересечениями).

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

Раньше такое реагирование обеспечивали, сочиняя довольно сложные библиотечные
функции, занимающиеся сбором событий типа scroll (прокрутка страницы) и заодно
resize (изменение размеров окна), после чего самостоятельно вычислявшие
координаты переменившегося положения того и другого прямоугольника с целью
выяснения того, пересеклись прямоугольники или не пересеклись.

[Статья о появлении поддержки Intersection Observer во браузере Mozilla Firefox
](https://hacks.mozilla.org/2017/08/intersection-observer-comes-to-firefox/)
упоминает также и о том, что некоторые создатели коммерческих элементов сайта
(например, баннеров) стремились оградить свои коммерческие интересы (в случае
баннеров ── не платить за непоказанные баннеры) ещё более сложными трюками,
нацеленными за измерение видимости (например, формированием прозрачных
однопиксельных флэшёвых видеозаписей с последующим подсчётом частоты кадров).

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

Отрасль браузеростроения пришла в итоге к тому, что вопрос видимости элемента
может отслеживать сам браузер (и быстрее, и энергоэффективнее), тогда как
скрипты на сайте могут (в подавляющем большинстве случаев) удовольствоваться,
вместо прежних частых низкоуровневых событий scroll и resize, новыми редкими
высокоуровневыми событиями двух типов (&+AKs-;элемент появился&+ALs-;
и &+AKs-;элемент скрылся&+ALs-;), которые к тому же поддаваться будут настройке
для альтернативных ответов на некоторые ключевые вопросы:

*) Появился где? ── в поле зрения читателя сайта? В пределах некоторого
родительского элемента?

*) Появился в какой мере? ── хотя бы на пиксел? На заданное число процентов?
Целиком?

*) Не увеличить ли (или уменьшить) отслеживаемый прямоугольник элемента
относительно реального? В какой мере и с какой стороны?

[На сайте MDN
](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)
можно ознакомиться с техническими подробностями нового API. Для рядового
читателя сайтов наиболее интересен будет там список тех версий браузеров,
начиная от которых они начали поддержку этого нового и полезного API; вот они:

*) Chrome 51,

*) Edge 15,

*) Firefox 55,

*) Opera 38.

Работы над поддержкою в Safari также
[ведутся](https://bugs.webkit.org/show_bug.cgi?id=159475) ── но им ещё,
насколько я мог судить, далеко до успешного завершения.

Поддержки в Internet Explorer нету.

Предприимчивые люди изготовили такой [polyfill
](https://github.com/WICG/IntersectionObserver/tree/gh-pages/polyfill) (то есть
костыль, если говорить русским техническим жаргоном), который обеспечивает
аналогичный интерфейс (разумеется, и более тормознуто, и с меньшими
возможностями ── но API тот же самый, чтобы новый код мог работать)
и в нескольких более ранних браузерах: во всех версиях Chrome, во всех
версиях Firefox, в Safari от версии 6, во всех версиях Edge, во всех
версиях Opera, в Internet Explorer от версии 7, во браузерах системы Android
версии 4.4 и новее.


* изначально написано в эхоконференцию Ru.Blog.Mithgol
* также было отослано в эхоконференцию Ru.Mozilla


Фидонет будет великим и гипертекстовым! [Ru.Mozilla] http://Mithgol.Ru/
Mithgol the Webmaster. [Братство Нод] [Team А я меняю subj]

... С М. Ю. Лермонтовым я познакомилась в детском саду. (школьное сочинение)