Uma árvore do DOM grande pode diminuir a velocidade da performance da página de várias maneiras:
Eficiência da rede e desempenho de carga
Uma árvore 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 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 recalcular constantemente a posição e o estilo dos nós. Uma árvore do DOM grande combinada com regras de estilo complicadas pode reduzir muito a velocidade de renderização e interatividade.
Desempenho da memória
Se o JavaScript usar seletores de consulta gerais, como
document.querySelectorAll('li'), você pode estar armazenando referências a um grande número de nós sem saber, o que pode sobrecarregar a 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 da página e o número máximo de elementos filhos:
O Lighthouse sinaliza páginas com árvores DOM que:
- Avisa quando o elemento body tem mais de 800 nós.
- Ocorrem erros quando o elemento body tem mais de 1.400 nós.
Como otimizar o tamanho do DOM
Em geral, crie nós de DOM somente quando necessário e elimine-os quando não forem mais necessários.
Se você estiver enviando uma árvore do DOM grande, tente carregar a página e anotar manualmente quais nós são mostrados. Talvez você possa remover os nós não mostrados do documento carregado inicialmente e só criá-los após uma interação relevante do usuário, como uma rolagem ou um clique em um botão.
Se você criar nós DOM durante a execução, os pontos de interrupção de mudança do DOM de modificação de subárvore podem ajudar a identificar quando os nós são criados.
Se não for possível evitar uma árvore do DOM grande, outra abordagem para melhorar a performance de renderização é simplificar os seletores de CSS. Consulte Reduzir o escopo e a complexidade dos cálculos de estilo do Google para mais informações.
Para mais detalhes, consulte o artigo Como tamanhos grandes do 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. - Reduza novas renderizações desnecessárias usando
shouldComponentUpdate,PureComponentouReact.memo. - Pule efeitos
somente até que algumas dependências tenham sido mudadas se você estiver usando o hook
Effectpara melhorar o desempenho durante a execução.