Use o Monitor de desempenho para ter uma ideia rápida do desempenho de carregamento e de tempo de execução do seu site.
Visão geral
O painel Monitor de desempenho mostra uma linha do tempo com as métricas de performance em tempo real. Clique em uma métrica para mostrá-la ou ocultá-la. Em seguida, observe como o gráfico muda à medida que 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 layouts e estilos por segundo.
Abrir o painel do monitor de desempenho
Para abrir o painel 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 Performance Monitor na parte de baixo da janela do DevTools.
Se preferir, no canto superior direito, selecione more_vert Mais opções > Mais ferramentas > Monitor de desempenho.
Usar o painel "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 à medida que você interage com seu site pode revelar oportunidades de melhoria.
Um recurso útil do Monitor de desempenho é que ele persiste durante toda a navegação nas páginas. Assim, como desenvolvedor de front-end, você pode evitar problemas como a sobrecarga de layout abrindo o Monitor de desempenho, navegando pelo site e acompanhando as métricas de nós do DOM e de Layout/s.
Se os usuários informarem tempos de carregamento lentos no seu site, o monitor de desempenho poderá ajudar a identificar as áreas com problemas.
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ê está apenas começando a analisar o desempenho, o caminho recomendado é primeiro usar o painel Lighthouse e depois investigar mais usando o painel Performance ou o Monitor de desempenho.