Otimização de desempenho front-end - reduz redesenho e refluxo

Quando a página é carregada, o navegador analisa o código HTML obtido em uma árvore DOM.A árvore DOM contém todas as tags HTML, incluindo display: nenhum oculto e elementos adicionados dinamicamente com JS.
　　O navegador analisa todos os estilos (CSS definido pelo usuário e agentes do usuário) em uma
　　árvore DOM da estrutura de estilos e uma combinação de estruturas de estilos para criar uma árvore de renderização.A árvore de renderização é semelhante à árvore do DOM, mas há uma grande diferença porque a árvore de renderização pode reconhecer estilos. Cada NODE na árvore de renderização tem seu próprio estilo e a árvore de renderização não contém nós ocultos (como display: nenhum nó e nó principal), porque esses nós não serão usados para renderização e não afetarão a renderização, Portanto, não será incluído na árvore de renderização. Meu entendimento simples é que, após a Árvore DOM e o CSS que escrevemos juntos, a árvore de renderização é renderizada.

Retorno

Quando alguma ou toda a árvore de renderização precisa ser reconstruída devido a alterações no tamanho, layout e ocultação de elementos, isso é chamado de refluxo. Quando o layout da página e as propriedades geométricas mudam, é necessário refluxo.

Cada página precisa ser refluída pelo menos uma vez, ou seja, quando a página é carregada pela primeira vez, a refluxo deve ocorrer nesse momento, porque a árvore de renderização deve ser construída. Durante o reflow, o navegador invalida a parte afetada da árvore de renderização e reconstrói essa parte da árvore de renderização.Após o reflow, o navegador redesenha a parte afetada na tela, denominada redesenho.

Redesenhar

Quando alguns elementos na árvore de renderização precisam atualizar atributos, esses atributos afetam apenas a aparência e o estilo do elemento e não afetam o layout, como a cor de fundo

A relação entre reflow e redesenho

O reflow definitivamente causará redesenho, e redesenho não necessariamente causa refluxo.

Duas maneiras de evitar redesenho e refluxo

1. retorno

Os atributos relacionados ao modelo de caixa acionarão o re-layout e o reflow da página

largura altura preenchimento margem exibição borda largura largura min-altura min-peso

Atributos de posicionamento e flutuadores também acionarão o re-layout

posição superior direita inferior esquerda flutuar

Alterar a estrutura de texto interna do nó também acionará o layout central

Fonte de texto com excesso de fluxo e fonte com família de fonte com excesso de altura e alinhamento vertical tamanho da fonte do espaço em branco

2. Redesenhar

cor borda estilo borda raio visibilidade texto fundo imagem de fundo posição posição fundo repetir tamanho de fundo contorno cor

Por exemplo:
você pode ver o vídeo do iQiyi, todas as camadas desta página em camadas e também as informações da camada, por exemplo, por que ela deve ser usada como uma única camada: Razões da composição

Ao redesenhar, o piscar de tinta marcará os elementos redesenhados em verde; por exemplo, o vídeo foi redesenhado durante a reprodução

O processo de criação de um novo DOM

Divida em várias camadas após obter o dom
Calcular o resultado do estilo para cada nó da camada (Recalcular o recálculo no estilo)
Gere gráficos e posições para cada nó (layout-reflow e re-layout)
Preencha cada nó no bitmap da camada (Paint Steup e Paing-redesenhar)
A camada é carregada na GPU como uma textura
Combine várias camadas na página para gerar a imagem final da tela (reorganização da camada Camadas compostas)

Se os elementos DOM que são redesenhados e refluídos frequentemente forem usados como uma camada independente, os efeitos de redesenhar e refletir os elementos DOM estarão apenas nessa camada.

Como transformar elementos dom em novas camadas independentes

Condições para criar camadas no Chrome

Atributos css de transformação em 3D ou perspectiva (transformação de perspectiva)
Use o nó <video> para decodificação de vídeo acelerada
Nó Canvas com contexto 3D (WebGL) ou contexto 2D acelerado
Plugins mistos, como flash
Use CSS para animar sua própria opacidade ou use um webkit animado para transformar os elementos
Elementos com filtros css acelerados
O elemento possui um nó descendente que contém uma camada composta (um elemento possui um elemento filho, que está em sua própria camada)
O elemento possui um elemento irmão com um índice z mais baixo e contém uma camada correspondente (em outras palavras, o elemento é renderizado na camada composta)

Ponto de otimização

1. Mecanismo de otimização do navegador

Os navegadores modernos são muito inteligentes, porque cada reordenação causará consumo computacional adicional, portanto, a maioria dos navegadores otimizará o processo de reordenação, fazendo modificações na fila e execução em lote. O navegador coloca a operação de modificação na fila e não limpa a fila até depois de um período de tempo ou quando a operação atinge um limite. Mas! Quando você obtém a operação das informações de layout, ela forçará a atualização da fila, por exemplo, quando você acessar as seguintes propriedades ou usar os seguintes métodos:

offsetTop, offsetLeft, offsetWidth, offsetHeight, scrollTop, scrollLeft, scrollWidth, scrollHeight, clientTop, clientLeft, clientWidth, clientHeight, getComputedStyle () getBoundingClientRect

Os atributos e métodos acima precisam retornar as informações mais recentes do layout, para que o navegador tenha que limpar a fila e acionar um reflow para retornar o valor correto. Portanto, quando modificamos o estilo, é melhor evitar o uso dos atributos listados acima, eles atualizarão a fila de renderização.

Se queremos obter e manipular esses valores frequentemente, podemos armazenar esses valores em cache primeiro.

2. Otimização

Como a recuperação de valores de atributo aciona o reflow, porque o reflow possui um mecanismo de armazenamento em cache, ao ler usando valores de atributo, o buffer é atualizado à força, pois, para obter dados reais, o mecanismo do buffer é inválido.

As camadas não podem ser abusadas porque afetarão o desempenho e consumirão muito tempo na composição da camada

Não altere o estilo do elemento filho por meio do pai. É melhor alterar diretamente o estilo do elemento filho. A alteração do estilo do elemento filho não deve afetar o tamanho e o tamanho do elemento pai e do elemento irmão o máximo possível.
Tente criar estilos de elementos através da classe, evite usar estilos.
Para efeitos de animação complexos, use o posicionamento absoluto para separá-lo do fluxo do documento, caso contrário, causará uma grande quantidade de refluxo do elemento pai e dos elementos subseqüentes.
Outro motivo para não usar o layout da tabela é que, uma vez que um elemento na tabela aciona reflow, ele fará com que todos os outros elementos na tabela refluam. No caso de uma tabela adequada, você pode definir o layout da tabela como automático ou fixo.
Evite definir várias camadas de estilos embutidos.
Use estilo modificado cssText.
Evite usar atributos css que acionam redesenho e refluxo
Limite o escopo de redesenho e refluxo para uma camada separada
Use traduzir em vez de top
Substitua a visibilidade pela opacidade
Não modifique o estilo do DOM um por um, pré-defina a classe e modifique o DOM className
Modifique o dom offline, por exemplo, primeiro dê o DOM para exibir: none (uma vez Reflow), depois modifique-o 100 vezes e depois exiba-o
Não coloque os valores de atributo dos nós DOM em um loop como variáveis no loop, como offsetHeight, offsetWidth
A escolha da velocidade de implementação da animação, limitando a frequência, pois consome recursos da CPU
Para animação, nova propriedade de transformação de tela de vídeo de camada
Ative a aceleração da GPU, como o webGL ao usar alterações de posição

Por que não usar top

Como os principais gatilhos refletem, mas a conversão não, dê um exemplo

Exemplos

1. Use top

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .text-box{
            position: absolute;
            left: 0;
            top: 0;
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
<div class="text-box">

</div>
<script>
    window.onload = () => {
        setTimeout(() => {
            let boxDomList = document.querySelectorAll('.text-box');
            boxDomList[0].style.top = '100px';
        }, 2000)
    }
</script>
</body>
</html>

Pode-se ver que em 2s o topo se tornará 100px

Primeira etapa: Reaclular o estilo 68 μs

Segunda etapa: o layout aciona o processo de refluxo 25 μs

Terceiro estágio: atualizar camada de árvore 68 μs

Quarta etapa: repintura de tinta 23 μs

A quinta etapa: síntese de imagem de camadas compostas 0.11ms

Compartilhado 68 + 25 + 68 + 23 + 110 = 294 μs

2. Use translate

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .text-box{
            /*position: absolute;*/
            /*left: 0;*/
            /*top: 0;*/
            transform: translateY(0);
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
<div class="text-box">

</div>
<script>
    window.onload = () => {
        setTimeout(() => {
            let boxDomList = document.querySelectorAll('.text-box');
            boxDomList[0].style.transform = 'translateY(100px)';
        }, 2000)
    }
</script>
</body>
</html>

Sem refluxo de layout

Primeira etapa: Reaclular o estilo 80 μs

Segundo estágio: Atualizar a árvore da camada 60 μs

Terceiro estágio: síntese de imagem de Camadas compostas 75 μs

Tempo total: 80 + 60 + 75 = 215 μs

Comparado com a primeira vez, economiza 79 μs , embora não muito, mas se o layout for muito complicado e houver muitos refluxos, a página terá benefícios óbvios

Cenário de uso: janela flutuante da página