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

Mithgol the Webmaster написал(а) к All в Aug 17 21:50:56 по местному времени:


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

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

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

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

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

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

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

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

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

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

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

*) Chrome 51,

*) Edge 15,

*) Firefox 55,

*) Opera 38.

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

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

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


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


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

... С М. Ю. Лермонтовым я познакомилась в детском саду. (школьное сочинение)
--- Эшелону: подразделения Delta и SEAL виртуально WASS WID Dolch secure shell