Os gerenciadores de entrada são uma possível causa de problemas de desempenho nos aplicativos, pois podem bloquear a conclusão de frames e causar trabalho de layout adicional e desnecessário.
Os gerenciadores de entrada são uma possível causa de problemas de desempenho nos apps, já que elas podem bloquear a conclusão de frames e causar e o layout padrão.
Resumo
- Evite manipuladores de entrada de longa duração. eles podem bloquear a rolagem.
- Não faça mudanças de estilo nos gerenciadores de entrada.
- Rejeite os gerenciadores. armazenar valores de evento e lidar com mudanças de estilo no próximo callback de requestAnimationFrame.
Evite gerenciadores de entrada de longa duração
No caso mais rápido possível, quando um usuário interage com a página, o thread compositor da página pode usar a entrada de toque do usuário e simplesmente mover o conteúdo. Isso não exige trabalho da linha de execução principal, onde são realizados JavaScript, layout, estilos ou pintura.
No entanto, se você anexar um gerenciador de entrada, como touchstart, touchmove ou touchend, a linha de execução do compositor precisará aguardar até que o gerenciador termine a execução, já que é possível chamar preventDefault() e interromper a rolagem por toque. Mesmo que você não chame preventDefault(), o compositor precisa aguardar. Assim, a rolagem do usuário é bloqueada, o que pode gerar renderização lenta e a perda de frames.
Em resumo, verifique se todos os gerenciadores de entrada que você executa devem ser executados rapidamente e permitir que o compositor faça seu trabalho.
Evitar mudanças de estilo nos gerenciadores de entrada
Os gerenciadores de entrada, como os usados para rolagem e toque, são programados para execução pouco antes de qualquer callback requestAnimationFrame.
Se você fizer uma mudança visual dentro de um desses gerenciadores, haverá mudanças de estilo pendentes no início de requestAnimationFrame. Depois, se você ler as propriedades visuais no início do callback requestAnimationFrame, conforme sugerido em "Evite layouts grandes e complexos e a troca frequente de layouts", acionará um layout síncrono forçado.
Rejeite a revolução dos gerenciadores de rolagem
A solução para os dois problemas acima é a mesma: sempre retarde as mudanças visuais para o próximo callback requestAnimationFrame:
function onScroll (evt) {
// Store the scroll value for laterz.
lastScrollY = window.scrollY;
// Prevent multiple rAF callbacks.
if (scheduledAnimationFrame)
return;
scheduledAnimationFrame = true;
requestAnimationFrame(readAndUpdatePage);
}
window.addEventListener('scroll', onScroll);
Isso também oferece o benefício adicional de manter os gerenciadores de entrada leves, o que é ótimo, porque agora você não está bloqueando coisas como rolagem ou toque em códigos que exigem muitos recursos computacionais.