Minimize o trabalho do thread principal

Published on Updated on

Translated to: English, Pусский

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:

Uma captura de tela da auditoria Lighthouse Minimize main thread work audit

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.

See the Lighthouse performance scoring post to learn how your page's overall performance score is calculated.

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

Renderização

Processamento de HTML e CSS

Processamento e compilação de scripts

Coleta de lixo

Recursos

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.