Acelerar o tempo de execução do JavaScript (tipo de criação de perfil "Amostragem de alocação")

Para identificar funções caras, use a ferramenta Memória :

Registre exatamente quais funções foram chamadas e quanta memória cada uma requer com a Amostragem de Alocação na ferramenta Memória .

Visualize seus perfis como um gráfico de chamas.

Use o tipo de criação de perfil "Amostragem de alocação" para exibir a alocação de memória pela função JavaScript

Se você notar instabilidade (interrupções de renderização) em seu JavaScript, colete um perfil de amostragem de alocação de memória usando o tipo de criação de perfil de amostragem de alocação . Um perfil de amostragem mostra quais funções alocaram mais memória.

Para usar o tipo de criação de perfil de amostragem de alocação para exibir a alocação de memória por função JavaScript:

1. Abra uma página da Web, como a página da Web de demonstração de Elementos Desanexados, em uma nova janela ou guia.

2. Clique com o botão direito do mouse na página da Web e selecione Inspecionar.

   Ou pressione Ctrl+Shift+I (Windows, Linux) ou Command+Option+I (macOS). O DevTools é aberto.

3. No DevTools, na Barra de Atividades, selecione a ferramenta Memória (ícone de ):

   

   Se a ferramenta Memória não estiver visível, clique no botão Mais ferramentas () e selecione Memória.

4. Selecione o botão de opção Amostragem de alocação .

   Se o botão de opção Amostragem de alocação não for mostrado, porque um perfil já foi exibido, no canto superior esquerdo, clique em Perfis ().

5. Na seção Selecionar instância de VM JavaScript , se houver um trabalhador na página, você poderá selecioná-lo como o destino da criação de perfil.

6. Na parte inferior da ferramenta Memória , clique no botão Iniciar .

7. Interaja com a página da Web. Por exemplo, clique no botão Tráfego rápido e, em seguida, no botão Parar na página da Web de demonstração.

   Dependendo do que você está tentando analisar, você pode atualizar a página, interagir com a página ou simplesmente deixar a página ser executada.

8. No canto superior esquerdo da ferramenta Memória, clique no botão Parar criação de perfil de heap (

   Ou, na parte inferior da ferramenta Memória , clique no botão Parar . Um novo Perfil é adicionado na seção Perfis de amostragem na barra lateral Perfis :

   

   O perfil de amostragem mostra um detalhamento da alocação de memória por função. O modo de exibição padrão é Pesado (Baixo para Cima). Você pode alternar para o modo de exibição de Gráfico ou Árvore (de cima para baixo), conforme a seção abaixo.

Você também pode usar a API de utilitários do console para registrar e agrupar perfis da linha de comando.

Alterar o modo de exibição de um perfil de amostragem

Para alterar a ordem de classificação em um perfil de amostragem de alocação de memória, use a lista suspensa do modo de exibição de perfil, que inicialmente diz Pesado (De baixo para cima):

Itens de menu:

• Gráfico - Gráfico cronológico da gravação.
• Heavy (Bottom Up) – Lista as funções chamadas do aplicativo em ordem de alocação de memória e mostra o caminho de chamada para cada função. O modo de exibição padrão.
• Árvore (de cima para baixo) – mostra a estrutura de chamada, começando na parte superior da pilha de chamadas.

Gráfico

O modo de exibição de gráfico exibe um gráfico cronológico da gravação:

Pesada (de baixo para cima)

O modo de exibição Heavy (Bottom Up) lista as funções por impacto no desempenho e permite examinar os caminhos de chamada para as funções. Esta é a exibição padrão:

Árvore (de cima para baixo)

O modo de exibição Árvore (de cima para baixo) mostra uma imagem geral da estrutura de chamadas, começando na parte superior da pilha de chamadas:

Excluir funções

Quando Pesado (De baixo para cima) ou Árvore (de cima para baixo) é selecionado (não Gráfico), há vários botões disponíveis (não esmaecidos) quando você seleciona uma linha:

• Função de foco selecionada (
• Excluir a função selecionada ()
• Restaurar todas as funções ()

Para excluir uma função de um perfil de amostragem de alocação de memória, selecione o perfil de amostragem e clique no botão Excluir função selecionada (). A função solicitante (pai) da função excluída (filho) é carregada 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 para a gravação.

Exibir um perfil de amostragem de alocação de memória como um gráfico

A exibição de gráfico fornece uma representação visual do perfil de amostragem ao longo do tempo.

Depois de registrar um perfil de amostragem de alocação de memória, exiba a gravação como um gráfico de degradê. Selecione Gráfico na lista suspensa do modo de exibição de perfil (que inicialmente diz Pesado (De baixo para cima)):

O gráfico de chamas é dividido em duas partes:

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 as invocações, para que você possa observar padrões em cada tempo de execução.

Uma pilha de chamadas alta não é necessariamente significativa; pode significar apenas que muitas funções foram chamadas. Mas uma barra larga significa que uma função levou muito tempo para ser concluída, portanto, essas são candidatas à otimização.

Amplie partes específicas da gravação

Para ampliar partes específicas da pilha de chamadas, clique e arraste para a esquerda e para a direita na visão geral. Após aplicar zoom, a pilha de chamadas exibe automaticamente a parte da gravação que você selecionou.

Exibir detalhes da função

Clique em uma função para exibi-la na ferramenta Fontes .

Passe o mouse sobre uma função para exibir o nome e os dados de tempo:

Investigue a alocação de memória, com lixo reduzido (caixas de seleção "Incluir objetos")

Por padrão, o tipo de criação de perfil de amostragem de alocação relata apenas alocações que ainda estão ativas no final da sessão de gravação. Os objetos que são criados, removidos e, em seguida, coletados como lixo (GC'd) não são exibidos na ferramenta Memória ao criar perfil usando a amostragem de Alocação ou Alocações nos tipos de criação de perfil de linha de linha do tempo.

Você pode confiar no navegador para limpar o lixo do seu código. No entanto, é importante considerar que o GC em si é uma operação cara e vários GCs podem diminuir a experiência do usuário em seu site ou aplicativo. Ao gravar na ferramenta Desempenho com a caixa de seleção Memória ativada, você pode ver a operação de GC acontecer nos penhascos íngremes (diminuições repentinas) no gráfico de heap:

Ao reduzir a quantidade de lixo que seu código está criando, você pode reduzir o custo de cada GC individual e o número de operações de GC.

Rastrear objetos descartados pelo GC

Para rastrear objetos que são descartados pela coleta de lixo:

1. Na ferramenta Memória , selecione o botão de opção Amostragem de alocação .

2. Clique em Incluir objetos descartados por GC principal e Incluir objetos descartados por configurações de GC secundárias .

   

3. Clique no botão Iniciar.

4. Na página da Web, execute as ações que você deseja investigar.

5. Clique no botão Parar quando terminar todas as suas ações.

O DevTools agora rastreia todos os objetos que foram GC'd durante a gravação. Use essas configurações para entender quanto lixo seu site ou aplicativo está gerando. Os dados relatados pela amostragem de alocação ajudarão você a identificar as funções que estão gerando mais lixo.

Se você estiver investigando objetos que só foram GC'd durante operações específicas de GC principais ou secundárias, defina as configurações apropriadamente para rastrear a operação que você se importa. Para saber mais sobre as diferenças entre GC maior e menor, consulte Trash talk: o coletor de lixo do Orinoco | Blog do desenvolvedor do mecanismo JavaScript V8.

Este trabalho está licenciado sob uma Licença Creative Commons Atribuição 4.0 Internacional.