Minimizar o reflow do navegador

Autor: Lindsey Simon, desenvolvedor de UX

Conhecimento recomendado: HTML básico, JavaScript básico, conhecimento prático de CSS

Reflow é o nome do processo do navegador da Web para recalcular as posições e geometrias dos elementos no documento, com a finalidade de renderizar de novo o documento, parcial ou totalmente. Como o reflow é uma operação de bloqueio de usuário no navegador, é útil para os desenvolvedores entender como melhorar o tempo do reflow e também entender os efeitos das várias propriedades do documento (complexidade do DOM - Modelo de documento objeto, na sigla em inglês, eficiência de regras para CSS, diferentes tipos de mudanças de estilo) sobre o tempo do reflow. Às vezes, o reflow de um elemento no documento pode exigir o mesmo processo nos elementos pai e nos elementos seguintes a ele.

Há diversas ações do usuário e possíveis mudanças no DHTML que podem acionar um reflow. Redimensionar a janela do navegador, usar métodos de JavaScript que envolvem estilos computados, adicionar ou remover elementos do DOM e alterar as classes de um elemento são algumas das coisas que podem acionar o reflow. Além disso, algumas operações podem aumentar o tempo de reflow. Veja o seguinte diagrama da palestra de Steve Souders, "Even Faster Web Sites":

Na tabela acima, está claro que nem todas as mudanças de estilo no JavaScript causam reflow em todos os navegadores e que o tempo necessário de reflow varia. Além disso, os dados mostram que os navegadores modernos têm tempos de reflow melhores.

No Google, nós testamos a velocidade de páginas e aplicativos da Web de diversas maneiras, e o reflow é um fator essencial que consideramos ao adicionar recursos às IUs. Queremos oferecer experiências dinâmicas, interativas e agradáveis para os usuários.

Diretrizes

Veja algumas diretrizes simples para ajudar a minimizar o reflow em páginas da Web:

  1. Reduza a complexidade desnecessária do DOM. As mudanças em um nível da árvore DOM podem causar alterações em todos os outros, desde a raiz até os elementos filhos do nó modificado. Isso aumenta o tempo gasto no reflow.
  2. Minimize as regras de CSS e remova aquelas que não são utilizadas.
  3. Se você fizer mudanças complexas de renderização, como animações, faça isso fora do fluxo. Use "position-absolute" ou "position-fixed" para fazer isso.
  4. Evite seletores CSS complexos e desnecessários, especialmente os seletores descendentes, que exigem mais processamento da CPU para fazer a correspondência de seletores.

Neste vídeo, Lindsey explica maneiras simples de minimizar o reflow nas suas páginas:

Outros recursos (em inglês)