Mapa de árvore do Lighthouse DOM - Como reduzir o tamanho do DOM
Nos últimos anos, o Google emitiu muitos avisos sobre o tamanho excessivo de seu aplicativo da web. Isso tem um custo muito alto para o usuário: renderização lenta e desempenho ruim do navegador e da experiência do usuário.
Para melhorar o desempenho do seu aplicativo, o Lighthouse introduziu a opção de reduzir o tamanho do DOM. Para muitas empresas, esta medida foi implementada para reduzir o consumo de memória e, consequentemente, o tamanho do documento geral. Infelizmente, uma pequena melhoria no consumo de memória, pelo menos no Chrome, pode trazer de volta esse problema de desempenho.
Para ajudar você com isso, no Chrome > agora temos um novo recurso para ajudá-lo a localizar os lugares na árvore do DOM que são realmente pesados: DOM Treemap.
O Treemap é uma extensão das Ferramentas do desenvolvedor do Chrome, onde você pode adicionar uma guia extra para visualização da árvore DOM.
Você pode ver a localização de todos os nós DOM em sua página atual. Para saber quais elementos têm mais filhos, basta clicar no botão "Filhos" no canto inferior direito da barra de ferramentas.
A ferramenta também foi ampliada com um recurso para visualizar os affiniciados do BEM. Isso permite que você veja a intensidade média de nós do seu componente BEM.
