Используйте пассивные прослушиватели для повышения производительности при прокрутке

Published on Updated on

Translated to: English, Português, 中文

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

Совместимость с браузером

Большинство браузеров поддерживают пассивные прослушиватели событий. См. совместимость с браузером.

Причины плохих результатов проверки пассивных прослушивателей событий в Lighthouse

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

Проверка Lighthouse показывает, что страница не использует пассивные прослушиватели событий для повышения производительности при прокрутке (Does not use passive event listeners to improve scrolling performance)

Lighthouse использует следующий процесс для определения прослушивателей событий, которые могут повлиять на производительность при прокрутке:

  1. Сбор всех прослушивателей событий на странице.
  2. Фильтрация прослушивателей, не имеющих отношения к сенсорному вводу и колесу мыши.
  3. Фильтрация прослушивателей, которые вызывают preventDefault().
  4. Фильтрация прослушивателей, которые находятся на хосте, отличном от хоста страницы.

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

Each Best Practices audit is weighted equally in the Lighthouse Best Practices Score. Learn more in The Best Practices score.

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

Добавьте флаг passive к каждому прослушивателю событий, идентифицированному Lighthouse.

Если вы поддерживаете только браузеры с поддержкой пассивного прослушивателя событий, просто добавьте флаг. Например:

document.addEventListener('touchstart', onTouchStart, {passive: true});

Если вы поддерживаете старые браузеры, которые не поддерживают пассивные прослушиватели событий, вам необходимо использовать обнаружение функций или полизаполнение. Для получения дополнительной информации см. раздел «Обнаружение функций» в документе WICG «Пассивные прослушиватели событий».

Ресурсы

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.