Compartilhar via

Medir o desempenho do runtime de uma página com a ferramenta Monitor de desempenho

Utilize a ferramenta Monitor de desempenho para obter uma vista em tempo real do desempenho do runtime de uma página Web.

A ferramenta monitor de desempenho ajuda a determinar de onde vêm os problemas de desempenho. Existem várias razões pelas quais um site pode ser executado lentamente. Esta ferramenta fornece pistas para compreender se os problemas estão relacionados com causas como as seguintes:

  • Memória elevada ou utilização da CPU.
  • Cálculos de esquema e estilo demasiado frequentes.
  • Demasiados nós DOM e serviços de escuta de eventos.

Abrir a ferramenta Monitor de desempenho

Para abrir a ferramenta Monitor de desempenho :

  1. Para abrir o DevTools, clique com o botão direito do rato na página Web e, em seguida, selecione Inspecionar. Em alternativa, prima Ctrl+Shift+I (Windows, Linux) ou Comando+Opção+I (macOS). O DevTools é aberto.

  2. Em DevTools, na Barra de Atividade, selecione o separador Monitor de desempenho . Se esse separador não estiver visível, clique no botão Mais Ferramentas (ícone Mais Ferramentas):

O menu Mais Ferramentas, a mostrar o comando do menu Monitor de desempenho

O Monitor de desempenho mostra gráficos de várias métricas de desempenho que são atualizadas em tempo real:

O aspeto da ferramenta monitor de desempenho quando é aberta pela primeira vez

Selecionar métricas de desempenho a monitorizar

A ferramenta Monitor de desempenho mostra três métricas de desempenho por predefinição e estão disponíveis métricas adicionais.

Métrica de desempenho Descrição
Uso da CPU A percentagem de CPU utilizada pela página Web. Mostrado por predefinição.
Tamanho da área dinâmica para dados JS A quantidade de memória utilizada pelo programa JavaScript na página. Mostrado por predefinição.
Nós do DOM O número de nós DOM no browser (entre separadores). Mostrado por predefinição.
Serviços de escuta de eventos JS O número de serviços de escuta de eventos JavaScript no browser (entre separadores).
Documentos O número de objetos de documento no browser (entre separadores).
Molduras de Documentos O número de fotogramas de documentos no browser (entre separadores).
Esquemas/seg O número de vezes por segundo que o motor do browser constrói o esquema da página.
Recalcs de estilo /seg O número de vezes por segundo que o motor do browser calcula o estilo CSS da página.

Para ativar ou desativar qualquer uma das métricas de desempenho disponíveis, clique nas etiquetas na barra lateral:

A barra lateral do Monitor de desempenho, a mostrar várias métricas que podem ser alternadas

  • Last updated on