O painel Linha do tempo do DevTools sempre foi a melhor parada no caminho para a otimização de desempenho. Essa visão geral centralizada da atividade do app ajuda a analisar onde o tempo é gasto no carregamento, no script, na renderização e na pintura. Recentemente, atualizamos a linha do tempo com mais instrumentação para que você tenha informações mais detalhadas do desempenho do seu app.
Adicionamos os seguintes recursos:
- JavaScript Profiler integrado. (Flame Chart incluído!)
- visualizador de frames, para ajudar a visualizar as camadas compostas.
- criador de perfil de pintura para ver detalhamentos da atividade de pintura do navegador.
O uso das opções de captura Paint descritas neste artigo gera sobrecarga no desempenho. Portanto, ative-as somente quando quiser.
Criador de perfil do JavaScript integrado
Se você já pesquisou sobre o painel Profiles, você provavelmente conhece o JavaScript CPU Profiler. Essa ferramenta mede onde o tempo de execução é gasto nas suas funções JavaScript. Ao visualizar perfis JavaScript com o Flame Chart, é possível visualizar o processamento do JavaScript ao longo do tempo.
Agora, é possível ver esse detalhamento da sua execução do JavaScript no painel Cronograma. Ao selecionar a opção de captura JS Profiler, você pode ver suas pilhas de chamadas JavaScript na linha do tempo, juntamente com outros eventos do navegador. Adicionar esse recurso à linha do tempo simplifica o fluxo de trabalho de depuração. Mas, mais do que isso, permite que você visualize seu JavaScript no contexto e identifique as partes de seu código que afetam o tempo de carregamento e a renderização da página.
Além do criador de perfil do JavaScript, também integramos uma visualização do Flame Chart ao painel Timeline. Agora é possível visualizar a atividade do app como a cascata clássica de eventos ou como um Flame Chart. O ícone do Flame Chart permite alternar entre essas duas visualizações.
Leitor de frames
A arte da composição de camadas é outro aspecto do navegador que fica oculto para os desenvolvedores. Quando usadas com moderação e cuidado, as camadas podem ajudar a evitar repinturas caras e gerar grandes aumentos de desempenho. No entanto, muitas vezes não é óbvio prever como o navegador vai criar seu conteúdo. Com a nova opção de captura Paint da linha do tempo, é possível visualizar camadas compostas em cada frame de uma gravação.
Quando você seleciona uma barra de frame cinza acima da Linha de execução principal, o painel Layers oferece um modelo visual das camadas que compõem seu app.
Você pode aplicar zoom, girar e arrastar o modelo de camadas para explorar o conteúdo. Passar o cursor sobre uma camada revela sua posição atual na página. Clique com o botão direito do mouse em uma camada para acessar o nó correspondente no painel Elements. Esses recursos mostram o que foi promovido a uma camada. Se você selecionar uma camada, também poderá ver por que ela foi promovida na linha Motivos da composição.
Criador de perfil de pintura
Por último, mas não menos importante, adicionamos o gerador de perfis de pintura para ajudar a identificar instabilidade causada por tintas caras. Esse recurso enriquece a linha do tempo com mais detalhes sobre o trabalho do Chrome durante eventos de pintura.
Para começar, agora está mais fácil identificar o conteúdo visual correspondente a cada evento de pintura. Quando você seleciona um evento de pintura verde na linha do tempo, o painel Detalhes mostra uma visualização dos pixels reais que foram pintados.
Se você quiser se aprofundar, mude para o painel Paint Profiler. Esse criador de perfil mostra os comandos de desenho exatos que o navegador executou para a pintura selecionada. Para conectar esses comandos nativos ao conteúdo real do app, clique com o botão direito do mouse em uma chamada de draw* e vá direto para o nó correspondente no painel Elements.
A minilinha do tempo na parte superior do painel permite reproduzir o processo de pintura e ter uma noção de quais operações são caras para o navegador. As operações de desenho são codificadas por cores da seguinte forma: rosa (formas), azul (bitmap), green (texto) e roxo (misc.). A altura da barra indica a duração da chamada. Por isso, investigar barras altas pode ajudar você a entender o custo de uma tinta específica.
Perfil e lucro!
Quando se trata de otimização de desempenho, o conhecimento do navegador pode ser incrivelmente eficiente. Essas atualizações da linha do tempo ajudam a esclarecer a relação entre o código e os processos de renderização do Chrome. Teste essas novas opções na linha do tempo e veja o que o Chrome DevTools pode fazer para melhorar seu fluxo de trabalho de busca de instabilidade.