Como melhorar o desempenho de rolagem com listeners de eventos passivos

Kayce Basques
Kayce Basques

Os listeners de eventos passivos, novos no Chrome 51, são um padrão da Web emergente que oferece um grande potencial de aumento no desempenho de rolagem, especialmente em dispositivos móveis. Confira o vídeo abaixo para ver 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 a página não parece ancorada ao dedo, isso é chamado de instabilidade de rolagem. Muitas vezes, quando você encontra o problema de deslizar, 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 a rolagem ao interagir com um Google Maps incorporado. Atualmente, os navegadores não sabem se um listener de eventos de toque vai cancelar a rolagem. Por isso, eles sempre esperam 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 vai cancelar a rolagem. Essas informações permitem que os navegadores rolem a página imediatamente, em vez de depois que o listener terminar.

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 a performance de rolagem

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

Explicação sobre o listener de eventos passivos