Evite um DOM com um tamanho grande demais

Uma árvore do DOM grande pode diminuir a performance da página de várias maneiras:

  • Eficiência de rede e desempenho de carga

    Uma árvore DOM grande geralmente inclui muitos nós que não estã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 os usuários e scripts interagem com sua página, o navegador precisa constantemente recalcular a posição e o estilo dos nós. Uma árvore do DOM grande em combinação com regras de estilo complicadas pode diminuir drasticamente a renderização e a interatividade.

  • Desempenho da memória

    Se o JavaScript usar seletores de consulta gerais, como document.querySelectorAll('li'), você poderá 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 de DOM da página e os elementos filhos máximos:

Evita uma auditoria do Lighthouse de tamanho excessivo do DOM mostrando o total de elementos DOM, a profundidade máxima do DOM e o número máximo de elementos filhos.
O Lighthouse destaca detalhes excessivos de tamanho de DOM

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 1.400 nós.

Como otimizar o tamanho do DOM

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

Se você estiver enviando uma árvore DOM grande, 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 criar apenas após uma interação relevante do usuário, como uma rolagem ou um clique no botão.

Se você criar nós do DOM no tempo de execução, os pontos de interrupção de mudança de DOM de modificação da subárvore poderão ajudar a identificar quando os nós são criados.

Se não for possível evitar uma árvore DOM grande, outra abordagem para melhorar a performance de renderização é simplificar os seletores 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ções específicas para a pilha

Angular

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

Reação

  • Use uma biblioteca "em 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 novas renderizações desnecessárias usando shouldComponentUpdate, PureComponent ou React.memo.
  • Efeitos para pular somente até que algumas dependências tenham sido mudadas se você estiver usando o hook Effect para melhorar o desempenho durante a execução.

Recursos