Acelerar o runtime do JavaScript (tipo de criação de perfis "Amostragem de alocação")
Para identificar funções dispendiosas, utilize a ferramenta Memória :
Registe exatamente as funções que foram chamadas e a quantidade de memória necessária com a Amostragem de Alocação na ferramenta Memória .
Visualize os seus perfis como um gráfico de chama.
Utilize o tipo de criação de perfis "Amostragem de alocação" para ver a alocação de memória pela função JavaScript
Se notar jank (interrupções de composição) no seu JavaScript, recolha um perfil de amostragem de alocação de memória com o tipo de criação de perfis de amostragem de alocação . Um perfil de amostragem mostra quais as funções que mais memória atribuiu.
Para utilizar o tipo de criação de perfis de amostragem de alocação para ver a alocação de memória pela função JavaScript:
Abra uma página Web, como a página Web de demonstração Elementos Desanexados, numa nova janela ou separador.
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.
Em DevTools, na Barra de Atividade, selecione a ferramenta Memória (
):
Se a ferramenta Memória não estiver visível, clique no botão Mais ferramentas (
) e, em seguida, selecione Memória.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 apresentado, porque já é apresentado um perfil, no canto superior esquerdo, clique em Perfis (
).Na secção Selecionar instância de VM JavaScript , se existir uma função de trabalho na página, pode selecioná-la como o destino da criação de perfis.
Na parte inferior da ferramenta Memória , clique no botão Iniciar .
Interaja com a página Web. Por exemplo, clique no botão Tráfego rápido e, em seguida, no botão Parar na página Web de demonstração.
Consoante o que está a tentar analisar, pode atualizar a página, interagir com a página ou simplesmente deixar a página ser executada.
No canto superior esquerdo da ferramenta Memória , clique no botão Parar a criação de perfis de área dinâmica para dados (
criação de perfis de área dinâmica para dados").Em alternativa, na parte inferior da ferramenta Memória , clique no botão Parar . É adicionado um novo Perfil na secção Perfis de amostragem na barra lateral Perfis :
O perfil de amostragem mostra uma discriminação da alocação de memória por função. A vista predefinida é Pesada (Inferior Para Cima). Pode mudar para a vista Gráfico ou Árvore (Superior Para Baixo), de acordo com a secção abaixo.
Também pode utilizar a API de Utilitários da Consola para registar e agrupar perfis a partir da linha de comandos.
Alterar a vista de um perfil de amostragem
Para alterar a sequência de ordenação num perfil de amostragem de alocação de memória, utilize a lista pendente Modo de vista de perfil , que inicialmente indica Heavy (Bottom Up):
Menuitems:
- Gráfico – gráfico cronológico da gravação.
- Pesado (Inferior Para Cima) - Listas as funções denominadas da aplicação por ordem de alocação de memória e mostra o caminho de chamada para cada função. A vista predefinida.
- Tree (Top Down) – mostra a estrutura de chamadas, começando na parte superior da pilha de chamadas.
Gráfico
O modo de vista Gráfico apresenta um gráfico cronológico da gravação:
Pesado (Inferior Para Cima)
O modo de vista Pesado (Inferior Para Cima) lista as funções por impacto no desempenho e permite-lhe examinar os caminhos de chamada para as funções. Esta é a vista predefinida:
Árvore (Superior Para Baixo)
O modo de vista Árvore (Superior Para Baixo) mostra uma imagem geral da estrutura de chamadas, começando na parte superior da pilha de chamadas:
Excluir funções
Quando a opção Pesado (Inferior Para Cima) ou Árvore (Superior Para Baixo) está selecionada (não Gráfico), existem vários botões disponíveis (não desativados) quando seleciona uma linha:
-
Função de concentração selecionada (
) -
Excluir 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, em seguida, clique no botão Excluir função selecionada (). A função de pedido (principal) da função excluída (subordinado) é cobrada com a memória alocada atribuída à função excluída (subordinado).
Clique no botão Restaurar todas as funções () para restaurar todas as funções excluídas novamente na gravação.
Ver um perfil de amostragem de alocação de memória como um Gráfico
A vista Gráfico fornece uma representação visual do Perfil de Amostragem ao longo do tempo.
Depois de gravar um perfil de amostragem de alocação de memória, veja a gravação como um gráfico de chama. Selecione Gráfico na lista pendente Modo de vista de perfil (que inicialmente diz Pesado (Inferior Para Cima)):
O gráfico de chama é dividido em duas partes:
| index | Sair | Descrição |
|---|---|---|
| 1 | Visão Geral | Uma vista de olhos de pássaros de toda a gravação. A altura das barras corresponde à profundidade da pilha de chamadas. Assim, quanto mais alta for a barra, mais profunda será a pilha de chamadas. |
| 2 | Pilhas de Chamadas | Esta é uma vista aprofundada das funções que foram chamadas durante a gravação. O eixo horizontal é a hora e o eixo vertical é a pilha de chamadas. As pilhas estão organizadas de cima para baixo. Assim, a função na parte superior chamou a que está por baixo e assim sucessivamente. |
As funções são coloridas aleatoriamente. Não existe nenhuma correlação com as cores utilizadas nos outros painéis. No entanto, as funções são sempre coloridas da mesma forma entre invocações, para que possa observar padrões em cada runtime.
Uma pilha de chamadas alta não é necessariamente significativa; pode significar que muitas funções foram chamadas. No entanto, uma barra larga significa que uma função demorou muito tempo a ser concluída, pelo que são candidatos à otimização.
Ampliar 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 descrição geral. Depois de ampliar, a pilha de chamadas apresenta automaticamente a parte da gravação que selecionou.
Ver detalhes da função
Clique numa função para vê-la na ferramenta Origens .
Paire o cursor sobre uma função para apresentar o nome e os dados de temporização:
| 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 desta função e quaisquer funções que tenha chamado. |
| URL | A localização da definição da função sob a forma de base.js:261 onde base.js é o nome do ficheiro onde a função é definida e 261 é o número de linha da definição. |
Investigar a alocação de memória, com memória reduzida (caixas de verificação "Incluir objetos")
Por predefinição, o tipo de criação de perfis de amostragem de Alocação apenas comunica 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, libertam memória (GC'd) não são apresentados na ferramenta Memória ao criar perfis com a amostragem de Alocação ou Alocações em linha do tempo tipos de criação de perfis.
Pode confiar no browser para limpo lixo do seu código. No entanto, é importante considerar que o GC em si é uma operação dispendiosa e que vários GCs podem abrandar a experiência do utilizador no seu site ou aplicação. Ao gravar na ferramenta Desempenho com a caixa de verificação Memória ativada, pode ver que a operação GC ocorre nas falésias íngremes (diminuições repentinas) no gráfico de área dinâmica para dados:
Ao reduzir a quantidade de lixo que o código está a criar, pode reduzir o custo de cada GC individual e o número de operações de GC.
Controlar objetos que são eliminados pelo GC
Para controlar objetos que são eliminados pela libertação da memória:
Na ferramenta Memória , selecione o botão Opção de amostragem de alocação .
Clique em Incluir objetos eliminados pelo GC principal e Incluir objetos eliminados por definições de GC secundárias .
Clique no botão Iniciar.
Na página Web, execute as ações que pretende investigar.
Clique no botão Parar quando terminar todas as suas ações.
As DevTools monitorizam agora todos os objetos que foram GC'd durante a gravação. Utilize estas definições para compreender a quantidade de lixo que o seu site ou aplicação está a gerar. Os dados comunicados pela Amostragem de alocação irão ajudá-lo a identificar as funções que estão a gerar mais lixo.
Se estiver a investigar objetos que eram apenas GC'd durante operações de GC principais ou secundárias específicas, configure as definições adequadamente para controlar a operação que lhe interessa. Para saber mais sobre as diferenças entre o gc principal e o menor, consulte Conversa de lixo: o recoletor de lixo Orinoco | Blogue do programador do motor JavaScript V8.
Observação
Partes desta página são modificações baseadas no trabalho criado e partilhado pela Google e utilizado de acordo com os termos descritos na Licença Internacional Creative Commons Attribution 4.0. A página original é encontrada aqui e é da autoria de Kayce Bascos e Meggin Kearney.
Este trabalho é licenciado ao abrigo de uma Licença Internacional creative Commons Attribution 4.0.