Otimizar o tamanho do DOM

Connor Clark
Connor Clark
X GitHub

Publicado em: 8 de outubro de 2025

Um DOM grande pode aumentar a duração dos cálculos de estilo e layouts, afetando a capacidade de resposta da página. Um DOM grande também aumenta o uso da memória.

Uma árvore DOM profunda não é um problema de desempenho por si só, mas é um sintoma de padrões de design que usam aninhamento de elementos desnecessário.

Esse insight considera todo o DOM, inclusive dentro de raízes shadow. Ele ignora nós DOM que não são elementos. Ela também ignora o conteúdo <iframe>.

O que procurar?

  • Total de elementos: o número geral de elementos no DOM da sua página.
  • Profundidade do DOM: a profundidade máxima da árvore do DOM.
  • A maioria das crianças: o elemento com mais elementos filhos.

Como transmitir esse insight

Esse insight só falha se houver um grande recálculo de layout ou estilo que exceda uma duração de 40 ms.

  • Uma atualização de layout grande envolve mais de 100 objetos de layout (que são aproximadamente elementos).
  • Um recálculo de estilo grande afeta mais de 300 elementos.

Em caso de falha, no painel Performance, o insight destaca esses eventos no gráfico de chamas.

Para reduzir o custo desses eventos:

Orientações específicas para a pilha

Esse insight também oferece orientação específica para páginas que usam as seguintes tecnologias:

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, PureComponent ou React.memo.
  • Pule efeitos somente até que algumas dependências tenham sido mudadas se você estiver usando o hook Effect para melhorar o desempenho durante a execução.

Outras referências