Acelerar o runtime do JavaScript
Para identificar funções caras, use a ferramenta Memória .
Resumo
Registre exatamente quais funções foram chamadas e quanta memória cada uma requer com Amostragem de Alocação na ferramenta Memória .
Visualize seus perfis como um gráfico de chamas.
Registrar um perfil de amostragem
Se você notar jank (interrupções de renderização) em seu JavaScript, colete um Perfil de Amostragem. Perfis de amostragem mostram onde o tempo de execução é gasto em funções em sua página.
Em DevTools, acesse a ferramenta Memória .
Clique no botão Opção De amostragem de alocação .
Clique em Iniciar.
Dependendo do que você está tentando analisar, você pode atualizar a página, interagir com a página ou apenas deixar a página ser executada.
Quando terminar, clique no botão Parar .
Você também pode usar a API de Utilitários de Console para registrar e agrupar perfis da linha de comando.
Exibir perfil de amostragem
Quando você termina a gravação, o DevTools preenche automaticamente o painel Memória em PERFIS DE AMOSTRAGEM com os dados da gravação.
A exibição padrão é Heavy (Bottom Up). Essa exibição permite que você examine quais funções tiveram mais impacto no desempenho e examine o caminho de solicitação para cada função.
Alterar a ordem de classificação
Para alterar a ordem de classificação, selecione o menu suspenso ao lado do ícone de função selecionada de foco (
) e selecione uma das seguintes opções:
Gráfico. Exibe um gráfico cronológico da gravação.
Pesado (De baixo para cima). Lista funções por impacto no desempenho e permite examinar os caminhos de chamada para as funções. Essa é a exibição padrão.
Árvore (de cima para baixo). Mostra uma imagem geral da estrutura de chamada, começando na parte superior da pilha de chamadas.
Excluir funções
Para excluir uma função do perfil de amostragem, selecione-a e clique no botão excluir função selecionada (
). A função de solicitação (pai) da função excluída (filho) é cobrada com a memória alocada atribuída à função excluída (filho).
Clique no botão restaurar todas as funções (
) para restaurar todas as funções excluídas de volta à gravação.
Exibir perfil de amostragem como gráfico
A exibição Gráfico fornece uma representação visual do Perfil de Amostragem ao longo do tempo.
Depois de gravar um Perfil de Amostragem, exiba a gravação como um gráfico de chamas alterando a ordem de classificação para Gráfico.
O gráfico de chamas é dividido em duas partes:
| index | Sair | Descrição |
|---|---|---|
| 1 | Visão Geral | Uma exibição de olho de pássaros de toda a gravação. A altura das barras corresponde à profundidade da pilha de chamadas. Então, quanto maior a barra, mais profunda a pilha de chamadas. |
| 2 | Pilhas de chamadas | Essa é uma exibição detalhada das funções que foram chamadas durante a gravação. O eixo horizontal é o tempo e o eixo vertical é a pilha de chamadas. As pilhas são organizadas de cima para baixo. Portanto, a função na parte superior chamou a abaixo dela e assim por diante. |
As funções são coloridas aleatoriamente. Não há correlação com as cores usadas nos outros painéis. No entanto, as funções são sempre coloridas da mesma forma entre invocações, para que você possa observar padrões em cada runtime.
Uma pilha de chamadas alta não é necessariamente significativa; isso pode significar que muitas funções foram chamadas. Mas uma barra ampla significa que uma função levou muito tempo para ser concluída, portanto, estes são candidatos à otimização.
Ampliar partes específicas da gravação
Para ampliar as partes específicas da pilha de chamadas, clique e arraste para a esquerda e para a direita na visão geral. Depois de ampliar o zoom, a pilha de chamadas exibe automaticamente a parte da gravação selecionada.
Exibir detalhes da função
Clique em uma função para exibi-la na ferramenta Fontes .
Passe o mouse em uma função para exibir o nome e os dados de tempo:
| Detalhe | Descrição |
|---|---|
| Nome | O nome da função. |
| Tamanho próprio | O tamanho da invocação atual da função, incluindo apenas as instruções na função. |
| Tamanho total | O tamanho da invocação atual dessa função e todas as funções que ela chamou. |
| URL | O local da definição de função na forma de base.js:261 onde base.js é o nome do arquivo em que a função é definida e 261 é o número de linha da definição. |
Observação
Partes desta página são modificações baseadas no trabalho criado e compartilhado pelo Google e usadas de acordo com os termos descritos na Licença Internacional de Atribuição do Creative Commons 4.0. A página original é encontrada aqui e é de autoria de Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse) e Meggin Kearney (Technical Writer).
Este trabalho é licenciado sob uma Licença Internacional de Atribuição do Creative Commons 4.0.