Skip to main content

Конференции

Просмотр конференции fido7.ru.mozilla:

Следующее

Дата: 20 Aug 2017, 21:50:56
От: Mithgol the Webmaster @ 2:50/88.0
Кому: All
Тема: Очередная веха эволюции браузеров в 2017 году: Intersection Observer


Эволюция браузеров в 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]

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

--- Эшелону: подразделения Delta и SEAL виртуально WASS WID Dolch secure shell
Origin: Помните ли?! ── в уголке сидело человек десять вьетнамцев (2:50/88)

Следующее

К списку сообщений
К списку конференций