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 da rede e desempenho do carregamento

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

  • Desempenho do ambiente de execução

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

  • Desempenho da memória

    Se o JavaScript usa seletores de consulta gerais, como document.querySelectorAll('li'), talvez você esteja armazenando referências a um grande número 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 os elementos filhos máximos:

Uma captura de tela do Lighthouse evita uma auditoria de tamanho excessivo do 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 aproximadamente 1.400 nós.

Como otimizar o tamanho do DOM

Em geral, procure maneiras de criar nós do DOM somente quando necessário e destruí-los quando não forem mais necessários.

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

Se você criar nós DOM no ambiente de execução, os Pontos de interrupção de alteração do DOM de modificação de subárvores poderão ajudar a identificar quando os nós são criados.

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

Orientações específicas para a pilha

Angular

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

Reagir

  • 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 novas renderizações desnecessárias usando shouldComponentUpdate, PureComponent ou React.memo.
  • Pular efeitos apenas até que determinadas dependências tenham sido alteradas, se você estiver usando o hook Effect para melhorar o desempenho do ambiente de execução.

Recursos