Para renderizar a parte ou a página inteira, o processo de recalcular locais e geometrias dos elementos da página é chamado de reflow. Como o reflow é uma operação de bloqueio de usuário em um navegador, é muito necessário que os desenvolvedores entendam como reduzir o número de reflexos e o impacto de diferentes atributos de documentos (profundidade do DOM, eficiência do CSS e nenhum tipo de alteração de estilo) no número de reflexos. Às vezes, um único elemento na página de reflexão reflete seu elemento pai e todos os elementos filhos.
Existem várias ações do usuário e alterações DHTML que podem desencadear o refluxo. Redimensione a janela do navegador, use JavaScript para calcular estilos, criar elementos de exclusão no DOM e altere a classe do elemento acionará o refluxo. Vale a pena notar que algumas operações desencadearão o reflexão várias vezes, além da sua imaginação. A imagem a seguir vem do discurso de Steve Souders ainda mais rápido sites:
É óbvio na tabela acima que nem todos os estilos controlados por JavaScript desencadeiam refluxo em todos os navegadores, mesmo que o número de gatilhos seja acionado é diferente. Ao mesmo tempo, pode -se observar que os navegadores modernos estão se saindo cada vez melhor no controle do número de reflexos.
No Google, medimos nossas páginas e aplicativos da Web de várias maneiras, e o reflow é um fator -chave que consideramos ao adicionar interface do usuário. Estamos comprometidos em transmitir experiências de usuário animadas, interativas e deliciosas.
em princípioAqui estão alguns princípios para reduzir o refluxo:
No vídeo abaixo (Nota da tradução: citado no YouTube, não pode ser visto, vá para o texto original para navegar na parede), Lindsey apresenta algumas maneiras de reduzir o refluxo.
Leitura adicional