Evite um DOM com um tamanho grande demais

Uma grande árvore do DOM pode prejudicar o desempenho da página de várias maneiras:

• Eficiência de rede e desempenho de carga

  Uma grande árvore do DOM geralmente 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 os custos de dados para os usuários e diminui o tempo de carregamento.

• Desempenho do ambiente de execução

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

• Desempenho da memória

  Se o JavaScript usa seletores de consulta gerais, como document.querySelectorAll('li'), você pode estar armazenando referências a um número muito grande de nós sem saber, 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 informa o total de elementos DOM de uma página, a profundidade máxima do DOM e o máximo de elementos filhos:

O Lighthouse sinaliza páginas com árvores do DOM que:

• Avisa quando o elemento do corpo tem mais de 800 nós.
• Erros quando o elemento do corpo tem mais de cerca de 1.400 nós.

Como otimizar o tamanho do DOM

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

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

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

Se não for possível evitar uma grande árvore do DOM, outra abordagem para melhorar o desempenho da renderização é simplificar os seletores de CSS. Para mais informações, consulte Reduzir o escopo e a complexidade dos cálculos de estilo do Google.

Para mais detalhes, consulte o artigo Como tamanhos grandes de DOM afetam a interatividade e o que você pode fazer a respeito.

Orientação específica da pilha

Angular

Ao renderizar listas grandes, use a rolagem virtual com o Component Dev Kit (CDK).

Reação

• Use uma biblioteca de "janelamento" como react-window para minimizar o número de nós do DOM criados se você estiver renderizando muitos elementos repetidos na página.
• Minimize novas renderizações desnecessárias usando shouldComponentUpdate, PureComponent ou React.memo.
• Ignora os efeitos somente até que certas dependências sejam alteradas se você estiver usando o hook Effect para melhorar o desempenho do ambiente de execução.

Recursos

• Código-fonte para evitar uma auditoria de tamanho excessivo do DOM
• Reduzir o escopo e a complexidade dos cálculos de estilo