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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ресурсы #

• Исходный код для проверки Does not use passive listeners to improve scrolling performance (Пассивные прослушиватели событий не используются для улучшения производительности при прокрутке).
• Повышение производительности при прокрутке с помощью пассивных прослушивателей событий.
• Объяснение пассивных прослушивателей событий.
• EventTarget.addEventListener ().