Наблюдатель на перекрестке? Что !? Звучит страшно!

В этом посте я хочу объяснить свое путешествие и пример использования Intersection Observer. Я также дам вам краткий обзор того, как вы можете начать работу.

Как сказано в спецификации…

Intersection Observer API предоставляет способ асинхронно наблюдать изменения в пересечении целевого элемента с элементом-предком или с окном просмотра документа верхнего уровня.

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

Мой вариант использования

А как насчет отложенной загрузки изображений на страницу?

Недавно я работал над улучшением производительности и размера полезной нагрузки, которые мы предоставляем нашим пользователям в Live Nation.

На главной странице Live Nation есть много изображений, и иногда эти изображения загружаются с таким высоким качеством, что в конечном итоге мы доставляем изображения, к сожалению, с большими размерами файлов.

Я почти уверен, что пользователи не заботятся о том, чтобы все изображения, сверху вниз, были загружены и готовы к просмотру. Я бы сказал, что они хотели бы, чтобы страница загружалась быстрее.

По этой причине, если вы являетесь пользователем мобильного устройства, вас будут интересовать только 1, 2, 3… изображения? Практически ничего. По сути, нет смысла обслуживать пользователей контент, который они, вероятно, даже не прокрутят, чтобы увидеть.

Итак, приступим!

Мы используем React, который помогает нам создавать красивые и многоразовые компоненты, которыми мы можем поделиться на нашем веб-сайте. Итак, я взял свой компонент Image и добавил к нему код.

Первое, что я хотел сделать, это убедиться, что он будет работать и вести себя как обычный компонент изображения после модификации, поэтому я добавил ему новую опору observeOnScroll.

Имея это на месте, я мог инкапсулировать свой код и выполнить его, передав только observeOnScroll. В моем componentDidMount это выглядело так:

  1. Я проверил, был ли передан компонентobserveOnScroll, иначе код не будет продолжен.
  2. Создайте новый IntersectionObserver, который получит функцию обратного вызова и набор параметров. Функция обратного вызова выполняется, когда ваш элемент становится видимым или невидимым, поэтому, когда элемент перехватывает область просмотра и есть некоторые параметры, которые вы можете передать, например, вы можете добавить поле к элементу, чтобы вы могли начать выполнять некоторые действия до того, как элемент станет видимым. Если вы хотите, вы можете изучить возможности Intersection Observer дальше.
  3. Я говорю своему наблюдателю наблюдать за элементом, в данном случае изображением.

И сейчас? Что мы ждем? Приступим к прокрутке страницы!

Как только вы начнете прокрутку и ваши элементы начнут пересекаться с окном просмотра, вы увидите, что выполняются обратные вызовы.

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

Но я хочу, чтобы мои изображения хорошо загружались и предварительно загружали их без каких-либо визуальных изменений, чтобы они были готовы, когда я повторно визуализирую свой компонент с реальным изображением. Итак, я буду прослушивать событие onload, и там я установлю состояние loaded в значение true, и я наконец смогу показать свое изображение. Все это вместе с красивой размытой анимацией, которая отвлекает пользователя во время загрузки.

Готово! 🎉

Поддержка браузера

На момент написания, как видите, большинство браузеров поддерживают его, и этого достаточно, чтобы вы начали внедрять его на свой веб-сайт. См. Текущую поддержку.

Но как насчет того браузера, у которого нет поддержки? Хорошо, в таких случаях я просто загружал полифилл.

Мы проверяем поддержку Intersection Observer, проверяя, есть ли он в объекте окна. Если да, то в полифилле нет необходимости, в противном случае мы загружаем наш файл полифилла на страницу.

Но, как всегда, есть некоторые сложности и отличия в плане реализации в браузере:

Например, когда я тестировал Интернет-браузер Samsung, он не работал! Не было изображений… Но почему? Я посмотрел на поддержку браузера, все было зеленым, так почему !?

Следующий шаг - путь отладки.

Я использовал реальное устройство, чтобы воспроизвести проблему (если вы хотите знать, как отлаживать на реальных устройствах, взгляните на это замечательное руководство по удаленной отладке через Интернет от Samsung), и, покопавшись, я обнаружил там не было isIntersecting свойства на IntersectionObserverEntry доступном, поэтому я решил погуглить! и нашел это:



Записи IntersectionObserver не поддерживают isIntersecting - Microsoft Edge Development
Помогите сделать Интернет просто работающим! Выявление первопричины помогает нам быстрее решать проблемы. Если у вас есть теория для… developer.microsoft.com



Оказывается, в Edge тоже не было isIntercepting, поэтому мне также нужно было проверить intersectionRatio > 0. Согласно спецификации, он должен быть таким же, как isIntersecting.

Зачем использовать IntersectionObserver

  • Раньше для выполнения того же действия мы могли использовать события уровня документа scroll и resize. Но прислушиваться к ним может быть довольно дорого, если вы в конечном итоге проведете с ними большое количество вычислений. Я рекомендую вам избегать их использования.
  • IntersectionObserver становится для них стандартной альтернативой, не требует библиотек и имеет хороший декларативный API.
  • Если вы не наблюдаете за какими-либо изменениями, просто disconnect их. Нет необходимости слушать все время (В нашем случае использования не было необходимости продолжать прослушивание пересечения изображений после загрузки, поэтому мы отключаем их t сразу после) .
  • Большинство современных браузеров поддерживают Intersection Observer, что является хорошим знаком.

Окончательные показатели

Мы загружали так много изображений за пределами экрана, которые не понадобились для первой загрузки на нашу страницу. Это уменьшило полезную нагрузку на 793 KB (4,450ms). Впечатляет, правда? 😱

Раньше было 66 запросов на изображения с главной страницы, что является чрезмерно большим количеством, больше, чем что-либо еще. Сейчас их 21, не так много, если сравнивать.

Как видите, полезная нагрузка запроса контента является здесь большим преимуществом, но здесь есть много других важных моментов:

  • Время загрузки упало с 4.104s до 3.543s.
  • Начать рендеринг уменьшено с 1.579s до 1.080s.
  • Индекс скорости помечен 4018, теперь это 2801.
  • И загрузка была завершена в 4.104s, а теперь 3.743s.

Что делать дальше?

На данный момент у нас есть много работы по повышению производительности, но мы уверены, что удаление изображений из нее будет большим стимулом для улучшения в этом плане.

Давайте посмотрим на загрузку страницы

Как вы можете видеть на рисунке выше, на мобильных устройствах время загрузки довольно велико. Если подумать, мы работаем примерно с 30 странами, некоторые из них даже не имеют надлежащей пропускной способности. Это число может быть еще более пугающим при загрузке страницы в этих странах! и мы никоим образом не разделяем их.

Заключение

Использование Intersection Observer - это потрясающе, поддержка браузера достойна, чтобы начать его использовать, и может значительно улучшить время полезной нагрузки на вашей странице.

Следите за обновлениями! И помните, идите и узнавайте о своих любимых артистах и ​​событиях по всему миру на www.livenation.co.uk.