Evite um tamanho excessivo de DOM

Uma grande árvore DOM pode diminuir o desempenho de sua página de várias maneiras:

• Eficiência da rede e desempenho de carga

  Geralmente, uma grande árvore DOM inclui muitos nós que não são visíveis quando o usuário carrega a página pela primeira vez, o que aumenta desnecessariamente o consumo de dados para os usuários e diminui o tempo de carregamento.

• Desempenho de tempo de execução

  À medida que os usuários e scripts interagem com sua página, o navegador precisa recalcular a posição e estilo de nós constantemente. Uma grande árvore DOM em conjunto com regras de estilo complicadas pode deixar a renderização drasticamente mais lenta.

• Desempenho de memória

  Se o seu JavaScript usa seletores de consulta gerais, como document.querySelectorAll('li'), você pode estar armazenando inadvertidamente referências a um grande número de nós, o que pode sobrecarregar os recursos de memória dos dispositivos dos usuários.

# Como a auditoria de tamanho do DOM do Lighthouse falha

O Lighthouse relata o total de elementos DOM de uma página, a profundidade máxima do DOM da página e o máximo de elementos filho:

O Lighthouse sinaliza páginas com árvores DOM:

• Ele gera avisos quando o elemento body tem mais de 800 nós.
• Ele gera erros quando o elemento body tem mais de 1.400 nós.

# Como otimizar o tamanho do DOM

Em geral, procure maneiras de criar nós DOM apenas quando necessário e destrua os nós quando não forem mais necessários.

Se você estiver enviando atualmente uma grande árvore DOM, tente carregar a página e observar manualmente quais nós são exibidos. Talvez você possa remover os nós não exibidos do documento carregado inicialmente e apenas criá-los depois de uma interação relevante do usuário, como rolagem ou clique de botão.

Se você criar nós DOM em tempo de execução, os pontos de interrupção de alteração de DOM para modificação de subárvore podem ajudar a identificar quando os nós são criados.

Se você não puder evitar uma grande árvore DOM, outra abordagem para melhorar o desempenho de renderização é simplificar os seletores de CSS. Consulte mais informações no artigo Reduza o escopo e a complexidade dos cálculos de estilo do Google.

# Orientação específica para pilha

# Angular

Se você estiver renderizando listas grandes, use a rolagem virtual com o Component Dev Kit (CDK).

# React

• Use uma biblioteca de "janelas", como react-window, para minimizar o número de nós DOM criados se você estiver renderizando muitos elementos repetidos na página.
• Minimize a renderização desnecessária usando shouldComponentUpdate, PureComponent ou React.memo.
• Ignore os efeitos apenas até que certas dependências tenham mudado se você estiver usando Effect para melhorar o desempenho em tempo de execução.

# Recursos

• Código-fonte da auditoria Evitar tamanho excessivo do DOM
• Reduza o escopo e a complexidade dos cálculos de estilo