Estatísticas de Chamadas em Tempo de Execução

O painel de desempenho do DevTools fornece insights sobre o desempenho em tempo de execução do seu aplicativo web visualizando várias métricas internas do Chrome. No entanto, certas métricas de baixo nível do V8 não estão atualmente expostas no DevTools. Este artigo guia você através da maneira mais robusta de coletar métricas internas detalhadas do V8, conhecidas como Estatísticas de Chamadas em Tempo de Execução ou RCS, através de chrome://tracing.

O rastreamento registra o comportamento de todo o navegador, incluindo outras abas, janelas e extensões, então funciona melhor quando feito em um perfil de usuário limpo, com extensões desabilitadas e nenhuma outra aba do navegador aberta:

# Inicie uma nova sessão do navegador Chrome com um perfil de usuário limpo e extensões desabilitadas
google-chrome --user-data-dir="$(mktemp -d)" --disable-extensions

Digite o URL da página que você deseja medir na primeira aba, mas não carregue a página ainda.

Adicione uma segunda aba e abra chrome://tracing. Dica: você pode simplesmente digitar chrome:tracing, sem as barras.

Clique no botão “Record” para preparar a gravação do rastreamento. Primeiro escolha “Desenvolvedor web” e então selecione “Editar categorias”.

Selecione v8.runtime_stats da lista. Dependendo de quão detalhada será sua investigação, você pode selecionar outras categorias também.

Pressione “Record” e volte para a primeira aba e carregue a página. O jeito mais rápido é usar Ctrl/⌘+1 para pular diretamente para a primeira aba e então pressionar Enter para aceitar o URL digitado.

Aguarde até que a página tenha sido carregada completamente ou o buffer esteja cheio, então “Pare” a gravação.

Procure uma seção “Renderer” que contenha o título da página web da aba registrada. O jeito mais fácil de fazer isso é clicando em “Processos”, então clicando em “None” para desmarcar todas as entradas, e então selecionando apenas o renderer do seu interesse.

Selecione os eventos de rastreamento/fatias pressionando Shift e arrastando. Certifique-se de cobrir todas as seções, incluindo CrRendererMain e quaisquer ThreadPoolForegroundWorkers. Uma tabela com todas as fatias selecionadas aparece na parte inferior.

Role para o canto superior direito da tabela e clique no link próximo a “Tabela de Estatísticas de Chamadas em Tempo de Execução”.

Na visualização que aparece, role até o final para ver uma tabela detalhada de onde o V8 gasta seu tempo.

Ao abrir uma categoria você pode analisar ainda mais os dados.

Interface da linha de comando

Execute d8 com --runtime-call-stats para obter métricas RCS da linha de comando:

d8 --runtime-call-stats foo.js