Como melhorar o desempenho de rolagem com listeners de eventos passivos

Kayce Basques
Kayce Basques

Uma novidade do Chrome 51 é que os listeners de eventos passivos são um padrão emergente da Web que oferecem um grande aumento no desempenho de rolagem, especialmente em dispositivos móveis. Confira o vídeo abaixo para uma demonstração lado a lado das melhorias em ação:

Como funciona

Quando você rola uma página e há um atraso tão grande que ela não parece estar fixada ao seu dedo, isso é chamado de instabilidade de rolagem. Muitas vezes, quando você encontra instabilidade de rolagem, o culpado é um listener de eventos de toque. Os listeners de eventos de toque geralmente são úteis para rastrear interações do usuário e criar experiências de rolagem personalizadas, como cancelar totalmente a rolagem ao interagir com um mapa do Google incorporado. Atualmente, os navegadores não podem saber se um listener de eventos de toque cancelará a rolagem. Portanto, eles sempre aguardam o listener terminar antes de rolar a página. Os listeners de eventos passivos resolvem esse problema permitindo que você defina uma flag no parâmetro options de addEventListener, indicando que o listener nunca cancelará a rolagem. Essas informações permitem que os navegadores rolem a página imediatamente, e não após a conclusão do listener.

Saiba mais

Confira o blog do Chromium para ter uma visão geral de alto nível de como os listeners de eventos passivos funcionam:

Novas APIs para ajudar os desenvolvedores a melhorar o desempenho de rolagem

E o repositório da especificação para aprender como implementar listeners de eventos passivos:

Explicação sobre o listener de eventos passivos