Como melhorar o tempo de inicialização do DevTools

Maksim Sadym
Maksim Sadym
X GitHub

A inicialização do DevTools agora é cerca de 13% mais rápida 🎉 (de 11,2s para 10s)

Resumo: o resultado é alcançado removendo uma serialização redundante.

Visão geral

Enquanto o DevTools está sendo inicializado, ele precisa fazer algumas chamadas para o motor JavaScript V8.

Processo de inicialização do DevTools

O mecanismo que o Chromium usa para enviar comandos do DevTools para o V8 (e para o IPC em geral) é chamado de mojo. Meus colegas de equipe, Benedikt Meurer e Sigurd Schneider, descobriram uma ineficiência enquanto trabalhavam em outra tarefa e tiveram a ideia de melhorar o processo removendo duas etapas redundantes de como essas mensagens são enviadas e recebidas.

Vamos nos aprofundar em como o mecanismo mojo funciona.

Os mecanismos mojo

Os mecanismos do mojo

Há um comando mojo EvaluateScript que executa o comando JS. Ele serializa todo o comando JS, incluindo o arguments, em uma string de código-fonte JavaScript que pode ser eval(). Como você pode imaginar, essas strings podem ficar muito longas e caras. Depois que o comando é recebido pelo V8, essas strings de código JavaScript são desserializadas antes da execução. Esse processo de serialização e desserialização para cada mensagem cria uma sobrecarga significativa.

Benedikt Meurer percebeu que a serialização e a desserialização do arguments são muito caras e que todas as etapas "Serializar comando JS para string JS" e "Desserializar string JS" são redundantes e podem ser puladas.

Detalhes técnicos: RenderFrameHostImpl::ExecuteJavaScript

Como melhoramos

Mecanismos aprimorados

Apresentamos outro método da API Mojo que permite transmitir o nome do objeto, o método a ser chamado e a lista de argumentos diretamente, em vez de ter que criar a string do código-fonte JavaScript. Isso nos permite pular a serialização e desserialização e elimina a necessidade de analisar o código JavaScript.

Para detalhes técnicos sobre como implementamos essa otimização, consulte estes dois patches:

  1. CL 2431864: [devtools] Redução da sobrecarga de desempenho do envio de mensagens no front-end
  2. CL 2442012: [devtools] Use ExecuteJavaScriptMethod no DevTools

Impacto

Para medir a eficácia da mudança, realizamos algumas medições comparando as revisões do Chromium cb971089a058 e 4f213b39d581 (antes e depois da mudança).

Para as duas revisões, executamos o seguinte cenário cinco vezes:

  1. Gravar rastro usando chrome://tracing
  2. Abrir o DevTools-on-DevTools
  3. Acesse o rastro CrRendererMain gravado e compare as métricas específicas do V8.

Com base nesses experimentos, o DevTools abre cerca de 13% mais rápido (de 11,2s para 10s) com a otimização.

Destaques e durações da CPU

Nome do método Não otimizado (ms) Otimizado (ms) Diferenças (ms) Melhoria na velocidade (%)
Total 11.213,19 9.953,99 -1.259,20 12,65%
v8.run 499,67 3.61 -496,06 12,65%
V8.Execute 1.654,87 1.349,61 -305,25 3,07%
v8.callFunction 1.171,84 1.339,77 167,94 -1,69%
v8.compile 133,93 3,56 -130,37 1,31%

Tempo de carga da CPU dos DevTools (ms)

Tabela de comparação de métricas de rastreamento completo

Como resultado, o DevTools é aberto e funciona mais rápido com menos uso da CPU. 🎉

Fazer o download dos canais de visualização

Use o Chrome Canary, Dev ou Beta como navegador de desenvolvimento padrão. Esses canais de visualização dão acesso aos recursos mais recentes do DevTools, permitem testar APIs de plataforma da Web de última geração e ajudam a encontrar problemas no seu site antes dos usuários.

Entre em contato com a equipe do Chrome DevTools

Use as opções a seguir para discutir os novos recursos, atualizações ou qualquer outra coisa relacionada ao DevTools.