Use o Monitor de desempenho para ter uma ideia do desempenho da carga e do tempo de execução do seu site.
Visão geral
O painel Monitor de desempenho exibe uma linha do tempo com um gráfico 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 conforme você interage com o app.
O monitor de desempenho acompanha as seguintes métricas:
- Uso da CPU.
- tamanho de heap do JavaScript.
- O número total de nós DOM, listeners de eventos JavaScript, documentos e frames na página.
- Recálculos de estilo e layouts por segundo.
Abrir o painel do Monitor de desempenho
Para abrir o painel do Monitor 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. O DevTools exibe o painel do Monitor de desempenho na parte inferior da janela.
Você também pode selecionar more_vert Mais opções > Mais ferramentas > Monitor de desempenho no canto superior direito.
Usar o painel do Monitor de desempenho
O Monitor de desempenho dá uma ideia geral do desempenho do tempo de execução do seu site.
Observar como os valores das métricas mudam conforme você interage com o site pode revelar oportunidades de melhoria.
Um recurso útil do Monitor de desempenho é que ele persiste durante toda a navegação nas páginas. Como desenvolvedor de front-end, você pode evitar problemas como a sobrecarga de layouts abrindo o Monitor de desempenho, rolando o site e acompanhando as métricas de nós do DOM e layout/segundo.
Se os usuários informarem tempos de carregamento lentos no site, o Monitor de desempenho poderá ajudar a identificar áreas problemáticas.
Por exemplo, um grande pico no uso da CPU pode apontar para um código ineficiente. Geralmente, se uma página tiver um grande número de listeners de eventos JS, talvez seja útil refatorar o código e reduzir esses números para liberar memória.
Se você estiver analisando o desempenho, o caminho recomendado é usar primeiro o painel Lighthouse e depois investigar mais usando o painel Performance ou o Monitor de desempenho.