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":
![](https://developers.google.cn/static/speed/images/reflow-chart.png?authuser=9&hl=pt)
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:
- 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.
- Minimize as regras de CSS e remova aquelas que não são utilizadas.
- 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.
- 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)
- Observações do Mozilla sobre o reflow de HTML
- Reflows e novos preenchimentos do Opera
- Demonstrações de reflow para depuração do Firefox, realizadas por Satoshi Ueyama:
- Material de Nicole Sullivan sobre reflows e novos preenchimentos