O processo pelo qual o navegador recalcula as posições e geometrias dos elementos da página para renderizar novamente parte ou a página inteira é chamado de refluxo. Como o refluxo é uma operação de bloqueio do usuário no navegador, é importante entender como reduzir o número de refluxos e como os diferentes atributos do documento (profundidade do DOM, eficiência do CSS, mudanças de estilo sem tipo) afetam o número de refluxos. muito necessário para desenvolvedores. Às vezes, um elemento em uma página de refluxo irá refluir seu elemento pai (anotação: plural aqui) e todos os elementos filhos.
Existem várias operações do usuário e alterações de DHTML que podem acionar o refluxo. Ajustar o tamanho da janela do navegador, usar javascript para calcular estilos ( estilos computados ), criar e excluir elementos no DOM e alterar a classe dos elementos acionará o refluxo. É importante notar que algumas operações irão acionar o refluxo várias vezes, além da sua imaginação. A imagem a seguir é do discurso de Steve Souders " Even Faster Web Sites ":
A partir da tabela acima, é óbvio que nem todos os estilos controlados por JavaScript acionam o refluxo em todos os navegadores e, mesmo que sejam acionados, o número de vezes não é o mesmo. Ao mesmo tempo, pode-se observar que os navegadores modernos estão cada vez melhores no controle do número de refluxos.
No Google, medimos a velocidade de nossas páginas e aplicativos da web de diversas maneiras, e o refluxo é um fator-chave que consideramos ao adicionar a IU. Nós nos esforçamos para oferecer uma experiência de usuário animada, interativa e agradável.
em princípio
Aqui estão alguns princípios para reduzir o refluxo:
No vídeo abaixo (Anotação: Citado no YouTube, não pode ser visualizado, acesse o texto original para contornar a parede), Lindsey apresenta alguns métodos para reduzir o refluxo.
Leitura adicional
Tradução original: http://www.99css.com/2009/06/minimizing-browser-reflow.html