Skip to content
Aprender Medir Blog Case studies Sobre
Nesta página
  • Como falha a auditoria do trabalho do thread principal do Lighthouse
  • Como minimizar o trabalho do thread principal
    • Computação de scripts
    • Estilo e layout
    • Renderização
    • Processamento de HTML e CSS
    • Processamento e compilação de scripts
    • Coleta de lixo
  • Recursos

Minimize o trabalho do thread principal

May 2, 2019 — Atualizado Oct 4, 2019
Available in: Русский, English
Appears in: Auditorias de desempenho
Nesta página
  • Como falha a auditoria do trabalho do thread principal do Lighthouse
  • Como minimizar o trabalho do thread principal
    • Computação de scripts
    • Estilo e layout
    • Renderização
    • Processamento de HTML e CSS
    • Processamento e compilação de scripts
    • Coleta de lixo
  • Recursos

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 #

  • Otimize o JavaScript de terceiros
  • Rode seus handlers de entradas em paralelo
  • Use web workers

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 #

  • Extraia o CSS crítico
  • Minifique o CSS
  • Adie CSS não crítico

Processamento e compilação de scripts #

  • Reduza payloads JavaScript com divisão de código
  • Remova o código não utilizado

Coleta de lixo #

  • Monitore o uso de memória total de sua página da web com measureMemory()

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)
Last updated: Oct 4, 2019 — Improve article
Return to all articles
Compartilhar
assinar

Contribute

  • Registrar um bug
  • Visualizar código-fonte

Conteúdo relacionado

  • developer.chrome.com
  • Atualizações do Chrome
  • Web Fundamentals
  • Estudos de caso
  • Podcasts
  • Shows

Conectar

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • Todos os produtos
  • Termos e privacidade
  • Diretrizes da comunidade

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.