{"componentChunkName":"component---src-templates-blog-js","path":"/blog/2018/09/10/introducing-the-react-profiler.html","result":{"data":{"markdownRemark":{"html":"

React 16.5 adiciona suporte para o novo plugin de profile do DevTools.\nEste plugin usa a API experimental de profile do React para coletar informações temporais sobre cada componente que é renderizado a fim de identificar gargálos de desempenho em aplicações React.\nEle será completamente compatível com nossas futuras funcionalidades de time slicing e suspense.

\n

Este blog post cobre os seguintes tópicos:

\n\n

Analisando uma aplicação

\n

DevTools irá exibir uma aba chamada “Profiler” para aplicações que suportem a nova API de profiling:

\n

\n \n \n \n \n \n \n \n \n \n

\n

Uma vez que você começou a gravar, DevTools irá coletar automativamente informações de desempenho cada vez que sua aplicação renderizar.\nUse sua aplicação como você normalente faria.\nQuando você finalizar a análise, clique no botão de “Parar”.

\n

\n \n \n \n \n \n \n \n \n \n

\n

Assumindo que sua aplicação renderizou pelo menos uma vez enquanto a análise acontecia, DevTools irá mostrar diversas formas para ver os dados de desempenho.\nIremos olhar cada uma destas formas abaixo.

\n

Lendo dados de desempenho

\n

Navegando por commits

\n

Conceitualmente, React funciona em duas fases:

\n\n

O profiler do DevTools agrupa a informação de desempenho por commit.\nCommits são exibidos em um gráfico de barra próximo ao topo do profiler:

\n

\n \n \n \n \n \n \n \n \n \n

\n

Cada barra no gráfico representa um único commit com o commit atualmente selecionado pintado de preto.\nVocê pode clicar numa barra (ou nas setas para esquerda/direita) para selecionar um commit diferente.

\n

A cor e a altura de cada barra corresponde ao tempo que aquele commit demorou para renderizar.\n(Barras amarelas altas demoraram mais do que as barras azuis menores.)

\n

Filtrando commits

\n

O quanto mais você executar o profile, mais vezes a sua aplicação irá renderizar.\nEm alguns casos você vai acabar com commits demais para analisar facilmente.\nO profiler oferece um mecanismo de filtro para ajudar nestes casos.\nUse-o para especificar um limit e o profiler irá esconder todos os commits que foram mais rápidos que aquele valor.

\n

\"Filtrando

\n

Gráfico de chama

\n

A visualização de gráfico de chama (flame chart) representa o estado da sua aplicação para um commit particular.\nCada barra no gráfico representa um componente React (por exemplo App, Nav).\nO tamanho e cor da barra representa quanto tempo o componente e seus filhos demoraram para renderizar.\n(A largura da barra representa quanto tempo foi gasto quando o componente foi renderizado pela última vez e a cor representa quanto tempo foi gasto como parte do commit atual.)

\n

\n \n \n \n \n \n \n \n \n \n

\n
\n

Nota:

\n

O tempo de renderização de um componente inclui o tempo gasto para renderizar seus filhos,\nportanto, os componentes que demoram mais para renderizar estão geralmente próximos ao topo da árvore.

\n
\n

Assim como no gráfico de chama, você pode aumentar ou diminuir o zoom de um gráfico de classificação ao clicar nos componentes.

\n

Gráfico de componente

\n

Algumas vezes é útil visualizar quantas vezes um componente específico renderizou enquanto você estava analisando.\nO gráfico de componente fornece esta informação no formato de um gráfico de barras.\nCada barra no gráfico representa uma vez que o componente renderizou.\nA cor e a altura de cada barra corresponde a quanto tempo o componente demorou para renderizar relativamente a outros componentes num commit específico.

\n

\n \n \n \n \n \n \n \n \n \n

\n

Você pode navigar através de interações e commits clicando neles:

\n

\"Navegue

\n

A API de rastreamento ainda é novo e iremos abordar ela com mais detalhes em posts futuros.

\n

Guia de soluções de problemas

\n

Nenhum dado de profile foi salvo para a raiz selecionada

\n

Se sua aplicação possui múltiplas “raizes”, você talvez veja a seguinte mensagem após a análise:\n\n \n \n \n \n \n \n \n \n \n

\n

Esta mensagem indica que nenhum dado de dessempenho foi gravado para a raiz que está selecionada no painel de “Elementos”.\nNeste caso, tente selecionar uma raiz diferente no painel para visualizar informações analisadas para aquela raiz:

\n

\"Selecione

\n

Nenhum dado de tempo a ser exibido para o commit selecionado

\n

Às vezes, um commit pode ser tão rápido que perfomance.now() não retorna nenhuma informação de tempo significativa para o DevTools.\nNeste caso, a seguinte mensagem irá aparecer:

\n

\n \n \n \n \n \n \n \n \n \n

\n

Vídeo aprofundado

\n

O vídeo a seguir demonstra como o React profiler pode ser usado para detectar e melhorar gargálos de performance numa aplicação React real.

\n
\n
","excerpt":"React 16.5 adiciona suporte para o novo plugin de profile do DevTools.\nEste plugin usa a API experimental de profile do React para coletar informações temporais sobre cada componente que é renderizado a fim de identificar gargálos de desempenho em aplicações React.\nEle será completamente compatível com nossas futuras funcionalidades de time slicing e suspense. Este blog post cobre os seguintes tópicos: Analisando uma aplicação Lendo dados de desempenho Navegando por commits Filtrando commits…","frontmatter":{"title":"Introduzindo o React Profiler","next":null,"prev":null,"author":[{"frontmatter":{"name":"Brian Vaughn","url":"https://github.com/bvaughn"}}]},"fields":{"date":"10 de setembro de 2018","path":"content/blog/2018-09-10-introducing-the-react-profiler.md","slug":"/blog/2018/09/10/introducing-the-react-profiler.html"}},"allMarkdownRemark":{"edges":[{"node":{"frontmatter":{"title":"React v17.0"},"fields":{"slug":"/blog/2020/10/20/react-v17.html"}}},{"node":{"frontmatter":{"title":"Apresentando o novo JSX Transform"},"fields":{"slug":"/blog/2020/09/22/introducing-the-new-jsx-transform.html"}}},{"node":{"frontmatter":{"title":"React v17.0 Candidato à lançamento: Sem novas funcionalidades"},"fields":{"slug":"/blog/2020/08/10/react-v17-rc.html"}}},{"node":{"frontmatter":{"title":"React v16.13.0"},"fields":{"slug":"/blog/2020/02/26/react-v16.13.0.html"}}},{"node":{"frontmatter":{"title":"Construindo Ótimas Experiências de Usuário com Modo Concorrente e Suspense"},"fields":{"slug":"/blog/2019/11/06/building-great-user-experiences-with-concurrent-mode-and-suspense.html"}}},{"node":{"frontmatter":{"title":"Preparando para o Futuro com as Prereleases React"},"fields":{"slug":"/blog/2019/10/22/react-release-channels.html"}}},{"node":{"frontmatter":{"title":"Apresentando o novo React DevTools"},"fields":{"slug":"/blog/2019/08/15/new-react-devtools.html"}}},{"node":{"frontmatter":{"title":"React v16.9.0 e a atualização do Roadmap"},"fields":{"slug":"/blog/2019/08/08/react-v16.9.0.html"}}},{"node":{"frontmatter":{"title":"O React já esta traduzido? ¡Sí! Sim! はい！"},"fields":{"slug":"/blog/2019/02/23/is-react-translated-yet.html"}}},{"node":{"frontmatter":{"title":"React v16.8: O React com Hooks"},"fields":{"slug":"/blog/2019/02/06/react-v16.8.0.html"}}}]}},"pageContext":{"slug":"/blog/2018/09/10/introducing-the-react-profiler.html"}},"staticQueryHashes":[]}