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

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

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

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

Как происходит сбой аудита пассивного прослушивателя событий Lighthouse

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

Аудит Lighthouse показывает, что страница не использует пассивные прослушиватели событий для повышения производительности прокрутки.

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

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

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

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

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

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

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

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

Ресурсы