Use o Monitor de desempenho para ter uma ideia rápida do carregamento e do desempenho de execução do seu site.
Visão geral
O painel Monitor de desempenho mostra uma linha do tempo que gera gráficos das métricas de desempenho em tempo real. Clique em uma métrica para mostrar ou ocultar. Em seguida, observe como o gráfico muda à medida que você interage com o app.
O Monitoramento de desempenho rastreia as seguintes métricas:
- Uso da CPU.
- Tamanho do heap do JavaScript.
- O número total de nós do DOM, listeners de eventos JavaScript, documentos e frames na página.
- Layouts e novos cálculos de estilo por segundo.
Abrir o painel do Monitor de desempenho
Para abrir o painel Monitoramento de desempenho:
- Abra o DevTools.
- Abra o menu de comando pressionando:
- macOS: Command+Shift+P
- Windows, Linux e ChromeOS: Control+Shift+P
- Comece a digitar
Performance monitor, selecione Mostrar monitor de desempenho e pressione Enter. As Ferramentas do desenvolvedor mostram o painel Monitor de desempenho na parte de baixo da janela.
Como alternativa, no canto superior direito, selecione Mais opções > Mais ferramentas > Monitor de desempenho.
Usar o painel do Monitor de desempenho
O Monitor de desempenho dá uma ideia geral do desempenho de execução do seu site.
Observar como os valores das métricas mudam à medida que você interage com o site pode revelar oportunidades de melhoria.
Um recurso útil do Monitor de desempenho é que ele persiste durante a navegação pela página. Assim, como desenvolvedor de front-end, você pode evitar problemas como layout thrashing abrindo o Monitor de desempenho, rolando pelo site e monitorando as métricas nós do DOM e layout/s.
Se os usuários estiverem relatando tempos de carregamento lentos no seu site, o Monitor de desempenho pode ajudar a identificar as áreas problemáticas.
Por exemplo, um grande pico no uso da CPU pode indicar um código ineficiente. E, geralmente, se uma página contém um grande número de listeners de eventos JS, pode ser benéfico refatorar o código e reduzir esses números para liberar memória.
Se você está começando a analisar o desempenho, o caminho recomendado é usar primeiro o painel Lighthouse e depois investigar mais usando o painel Performance ou o Monitoramento de desempenho.