O painel Linha do tempo do DevTools sempre foi a melhor primeira 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, na criação de scripts, na renderização e na pintura. Recentemente, atualizamos a linha do tempo com mais instrumentação para que você possa ter uma visão mais detalhada do desempenho do seu app.
Adicionamos os seguintes recursos:
- criador de perfil JavaScript integrado. (Flame gráfico incluído!)
- visualizador de frames (em inglês) para ajudar você a visualizar as camadas compostas.
- paint Profiler para obter detalhamentos sobre a atividade de pintura do navegador.
Observe que o uso das opções de captura Paint descritas neste artigo pode gerar sobrecarga no desempenho. Por isso, ative-as somente quando quiser.
Criador de perfil JavaScript integrado
Se você já conhece o painel Profiles, provavelmente conhece o JavaScript CPU Profiler. Essa ferramenta mede onde o tempo de execução é gasto em suas funções JavaScript. Ao visualizar perfis de JavaScript com o Flame Chart, é possível visualizar o processamento de JavaScript ao longo do tempo.
É possível conferir esse detalhamento granular da execução do JavaScript no painel Cronograma. Ao selecionar a opção de captura do JS Profiler, você pode ver suas pilhas de chamadas JavaScript na linha do tempo com outros eventos do navegador. Adicionar esse recurso à linha do tempo ajuda a simplificar o fluxo de trabalho de depuração. Porém, mais do que isso, ele permite que você visualize seu JavaScript em contexto e identifique as partes do seu código que afetam o tempo de carregamento da página e a renderização.
Além do criador de perfil JavaScript, também integramos uma visualização do Flame Chart ao painel Linha do tempo. Agora é possível visualizar a atividade do seu app como a hierarquia clássica de eventos ou como um Flame Chart. O ícone do Flame Chart permite alternar entre essas duas visualizações.
![Ícone de chama.](https://developer.chrome.com/static/blog/devtools-timeline-now-providing-the-full-story/image/flame-icon-88552c36931b3.png?authuser=1&hl=pt-br)
![Usar a opção de captura do JS Profiler e a visualização do Flame Chart para investigar pilhas de chamadas na linha do tempo.](https://developer.chrome.com/static/blog/devtools-timeline-now-providing-the-full-story/image/using-js-profiler-captur-f24510c4ffb96.png?authuser=1&hl=pt-br)
Visualizador de frames
A arte da composição de camadas é outro aspecto do navegador que tem sido praticamente ocultado dos desenvolvedores. Quando usadas com moderação e cuidado, as camadas podem ajudar a evitar retintas caras e gerar grandes melhorias de desempenho. No entanto, muitas vezes não é óbvio para prever como o navegador compõe 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 frames cinza acima da Main Thread, o painel Layers dessa barra oferece um modelo visual das camadas que compõem seu app.
É possível aplicar zoom, girar e arrastar o modelo de camadas para explorar o conteúdo dele. Passar o cursor sobre uma camada revela a posição atual dela na página. Clique com o botão direito do mouse em uma camada para acessar o nó correspondente no painel Elementos. Esses recursos mostram o que foi promovido para uma camada. Se você selecionar uma camada, também poderá ver por que ela foi promovida na linha Composição de motivos.
![Inspecionando uma camada da Scattered Polaroids Gallery do Codrops para revelar as razões do navegador para a composição.](https://developer.chrome.com/static/blog/devtools-timeline-now-providing-the-full-story/image/inspecting-layer-codrop-47e24b33f4ad3.png?authuser=1&hl=pt-br)
Criador de perfil de pintura
Por último, mas não menos importante, adicionamos o criador de perfil de pintura para ajudar você a identificar instabilidade causada por tintas caras. Esse recurso enriquece a linha do tempo com mais detalhes sobre o trabalho que o Chrome realiza durante eventos de exibição.
Para começar, agora é 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.
![Visualização dos pixels pintados pelo navegador usando a opção "Captura de pintura".](https://developer.chrome.com/static/blog/devtools-timeline-now-providing-the-full-story/image/previewing-pixels-the-br-42df0e50055d.png?authuser=1&hl=pt-br)
Se você quiser se aprofundar, alterne 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 draw* e vá direto para o nó correspondente no painel Elementos.
![Relacionar chamadas de desenho do navegador nativo para elementos DOM usando o Paint Profiler.](https://developer.chrome.com/static/blog/devtools-timeline-now-providing-the-full-story/image/relating-native-browser-d-33ad9225c5d3b.png?authuser=1&hl=pt-br)
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 realizar. As operações de desenho são codificadas por cores da seguinte forma: rosa (formas), azul (bitmap), verde (texto) e roxo (misc.). A altura da barra indica a duração da chamada. Portanto, investigar barras altas pode ajudar você a entender o custo de uma tinta específica.
Perfil e lucro
Quando se trata de otimização do desempenho, o conhecimento do navegador pode ser incrivelmente poderoso. Essas atualizações da Linha do tempo ajudam a esclarecer a relação entre seu código e os processos de renderização do Chrome quando você confere mais detalhes. Teste essas novas opções na Linha do tempo e confira como o Chrome DevTools pode fazer para melhorar seu fluxo de trabalho em busca de instabilidade!