Minimize o trabalho do thread principal
O processo de renderização do navegador é o que transforma seu código numa página web com a qual seus usuários podem interagir. Por default, o thread principal do processo de renderização normalmente lida com a maioria do código: ele processa o HTML e constrói o DOM, processa o CSS e aplica os estilos especificados e processa, computa e executa o JavaScript.
O thread principal também processa eventos do usuário. Portanto, sempre que o thread principal estiver ocupado fazendo outra coisa, sua página web poderá não responder às interações do usuário, trazendo uma experiência ruim.
Como falha a auditoria do trabalho do thread principal do Lighthouse #
O Lighthouse sinaliza páginas que mantêm o thread principal ocupado por mais de 4 segundos durante o carregamento:
Para ajudá-lo a identificar as fontes de carregamento do thread principal, o Lighthouse mostra uma análise de onde o tempo da CPU foi gasto enquanto o navegador carregava sua página.
Como minimizar o trabalho do thread principal #
As seções abaixo são organizadas com base nas categorias que o Lighthouse relata. Veja The anatomy of a frame para ter uma visão geral de como o Chromium renderiza páginas web.
Veja Faça menos trabalho no thread principal para aprender como usar o Chrome DevTools para investigar exatamente o que seu thread principal está fazendo enquanto a página carrega.
Computação de scripts #
Estilo e layout #
- Reduza o escopo e a complexidade dos cálculos de estilo
- Evite layouts grandes e complexos e alterações de layout
Renderização #
- Atenha-se apenas às propriedades do compositor e gerencie a contagem de camadas
- Simplifique a complexidade da pintura e reduza as áreas de pintura
Processamento de HTML e CSS #
Processamento e compilação de scripts #
Coleta de lixo #
Recursos #
- Código fonte para a auditoria Minimize main thread work
- Thread principal (MDN)
- Visão interna de um navegador da web moderno (parte 3)