react perf devtool
vtool
Procurando mantenedores
Um devtool para inspecionar o desempenho dos componentes do React
Introdução
Demonstração
Usos
Instalar
Uso
Descrição
Fases
Implementação
Contribuindo
Licença
O React Performance Devtool é uma extensão do navegador para inspecionar o desempenho dos componentes do React. Ele examina estatisticamente o desempenho dos componentes do React com base nas medidas que são coletadas pelo React usando a API window.performance .
Juntamente com a extensão do navegador, as medidas também podem ser inspecionadas em um console. Veja a seção de uso para obter mais detalhes.
Este projeto começou com o objetivo de estender o trabalho realizado por Will Chen em uma proposta de tabela de desempenho do React. Você pode ler mais sobre isso aqui.
Uma demonstração da extensão usada para examinar o desempenho dos componentes do React no meu site.
As medidas de desempenho também podem ser registradas em um console. A cada renderização, as medidas são atualizadas e registradas no console.
Remova ou desmonte as instâncias de componentes que não estão sendo usadas.
Inspecione o que está bloqueando ou demorando mais tempo após o início de uma operação.
Examine a tabela e veja quais componentes, você precisa escrever o gancho de ciclo de vida do MatirComponentupDate.
Examine quais componentes estão levando mais tempo para carregar.
Para usar este DevTool, você precisará instalar um módulo NPM que registre um ouvinte (leia mais sobre isso na seção de uso) e a extensão do navegador.
Instalando a extensão
As extensões abaixo representam a versão estável atual.
Instalando o módulo NPM
npm install react-perf-devtool
Uma compilação umd também está disponível via unpkg
< script crossorigin src = "https://unpkg.com/[email protected]/lib/npm/hook.js" > </ script >Esta extensão e pacote também dependem do React. Certifique -se de ter esses instalados também.
Nota - O módulo NPM é importante e é necessário usar o Devtool. Portanto, verifique se você o instalou antes de usar a extensão do navegador.
Esta seção da documentação explica o uso do Devtool e a API para registrar um observador em um aplicativo React.
React react-perf-devtool depende da window.PerformanceObserver nativa. Para mais informações, consulte o Mozilla Docs oficial aqui.
Para usar essa extensão DevTool, você precisará registrar um observador em seu aplicativo que observará uma coleção de dados (medidas de desempenho) ao longo de um tempo.
Registrar observador
O registro de um observador é muito simples e é apenas uma chamada de função. Vamos ver como!
const { registerObserver } = require ( 'react-perf-devtool' )
// assign the observer to the global scope, as the GC will delete it otherwise
window . observer = registerObserver ( ) Você pode colocar esse código dentro do seu arquivo index.js (recomendado) ou qualquer outro arquivo no seu aplicativo.
Nota - Isso deve ser usado apenas no modo de desenvolvimento quando você precisar inspecionar o desempenho dos componentes do React. Certifique -se de removê -lo ao construir para produção.
O registro de um observador conecta um objeto que contém informações sobre os eventos e medidas de desempenho dos componentes do React no objeto da janela, que podem ser acessados dentro da janela inspecionada usando avaliar ().
A cada renderização, esse objeto é atualizado com novas medidas e eventos contam. A extensão cuida da limpeza da memória e também do cache.
Você também pode passar um objeto option e um callback opcional que recebe um argumento que contém as medidas analisadas e agregadas
Usando o retorno de chamada
Um retorno de chamada opcional também pode ser passado para registerObserver , que recebe medidas analisadas como seu argumento.
Você pode usar esse retorno de chamada para inspecionar as medidas analisadas e agregadas, ou pode integrá -lo a qualquer outro caso de uso. Você também pode aproveitar essas medidas de desempenho usando o Google Analytics enviando essas medidas para o painel do Analytics. Este processo está documentado aqui.
Exemplo -
const { registerObserver } = require ( 'react-perf-devtool' )
function callback ( measures ) {
// do something with the measures
}
// assign the observer to the global scope, as the GC will delete it otherwise
window . observer = registerObserver ( { } , callback ) Depois de registrar o Observer, inicie seu servidor de desenvolvimento local e vá para http://localhost:3000/ .
Nota - Esta extensão funciona apenas para reagir 16 ou acima das versões dele.
Depois de instalar a extensão com sucesso, você verá uma guia chamada React Performance nas Ferramentas do Developer Chrome.
As medidas de desempenho também podem ser registradas no console. No entanto, o processo de impressão das medidas não é direto. Você precisará configurar um servidor que ouvirá as medidas. Para isso, você pode usar o Micro pelo Zeit, que é um microsserviço HTTP.
npm install --save micro
Você pode passar um objeto de opção como um argumento para registerObserver para ativar o registro e a configuração de um número de porta.
Usando o objeto de opção
{
shouldLog : boolean , // default value: false
port : number // default value: 8080
timeout : number // default value: 2000
} Você pode passar três propriedades para o objeto option , shouldLog e port .
shouldLog - é preciso um valor booleano . Se definido como true, as medidas serão registradas no console.
port - Número da porta para o servidor onde as medidas serão enviadas
timeout - um valor de tempo limite para adiar a inicialização da extensão.
Se o seu aplicativo levar tempo para carregar, é melhor adiar a inicialização da extensão especificando o valor do tempo limite por meio da propriedade timeout . Isso garante que a extensão seja carregada somente após o seu aplicativo ser carregado corretamente no navegador para que as medidas atualizadas possam ser renderizadas. No entanto, você pode pular esta propriedade se o seu aplicativo tiver um tamanho pequeno.
Exemplo
// index.js file in your React App
const React = require ( 'react' )
const ReactDOM = require ( 'react-dom' )
const { registerObserver } = require ( 'react-perf-devtool' )
const Component = require ( './Component' ) // Some React Component
const options = {
shouldLog : true ,
port : 8080 ,
timeout : 12000 // Load the extension after 12 sec.
}
function callback ( measures ) {
// do something with the measures
}
// assign the observer to the global scope, as the GC will delete it otherwise
window . observer = registerObserver ( options , callback )
ReactDOM . render ( < Component /> , document . getElementById ( 'root' ) ) // server.js
const { json } = require ( 'micro' )
module . exports = async req => {
console . log ( await json ( req ) )
return 200
} // package.json
{
"main" : "server.js" ,
"scripts" : {
"start-micro" : "micro -p 8080"
}
}Esquema das medidas
Abaixo está o esquema das medidas de desempenho que são registradas no console.
{
componentName ,
mount : { // Mount time
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
} ,
render : { // Render time
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
} ,
update : { // Update time
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
} ,
unmount : { // Unmount time
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
} ,
totalTimeSpent , // Total time taken by the component combining all the phases
percentTimeSpent , // Percent time
numberOfInstances , // Number of instances of the component
// Time taken in lifecycle hooks
componentWillMount : {
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
}
componentDidMount: {
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
}
componentWillReceiveProps : {
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
} ,
shouldComponentUpdate : {
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
} ,
componentWillUpdate : {
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
} ,
componentDidUpdate : {
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
} ,
componentWillUnmount : {
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
}
}componentes
Você também pode inspecionar o desempenho de componentes específicos usando opções através da propriedade components .
Exemplo -
const options = {
shouldLog : true ,
port : 3000 ,
components : [ 'App' , 'Main' ] // Assuming you've these components in your project
}
function callback ( measures ) {
// do something with measures
}
// assign the observer to the global scope, as the GC will delete it otherwise
window . observer = registerObserver ( options , callback ) A seção de visão geral representa uma visão geral do tempo total (%) tirado por todos os componentes do seu aplicativo.
O tempo gasto por todos os componentes - mostra o tempo gasto por todos os componentes (combinando todas as fases).
Duração do tempo para cometer mudanças - mostra o tempo gasto no cometimento de mudanças. Leia mais sobre isso aqui
Duração do tempo para cometer efeitos do host - mostra o tempo gasto no cometimento de efeitos do host, ou seja, com comprometimento quando uma nova árvore é inserida (atualização) e não. dos efeitos do hospedeiro (contagem de efeitos na confirmação).
Duração do tempo para os métodos de ciclo de vida de chamadas - relata a duração do tempo dos ganchos do ciclo de vida de chamada e o total de métodos chamados, quando um gancho de ciclo de vida agendas uma atualização em cascata.
Tempo total
Limpo - o botão limpo limpa as medidas das tabelas e também limpa os resultados.
Recarregue a janela inspecionada - Este botão recarrega a janela inspecionada e exibe as novas medidas.
Eventos pendentes - isso indica as medidas pendentes (dados de desempenho do React).
Esta seção mostra o tempo gasto por um componente em uma fase, número de instâncias de um componente e tempo total combinando todas as fases em ms e %
Dados abaixo, estão as diferentes fases para as quais a reação mede o desempenho:
RECONCILIAÇÃO DE ÁRVORE DE REACH - Nesta fase, o React renderiza o nó raiz e cria um trabalho em andamento. Se houvesse algumas atualizações em cascata durante a reconciliando, ele interromperá as medições ativas e as retomará em um loop diferido. Isso é causado quando uma atualização de nível superior interrompe a renderização anterior. Se um erro foi lançado durante a fase de renderização, ele captura o erro encontrando o limite de erro mais próximo ou ele usará a raiz se não houver limite de erro.
Comprometer mudanças - Nesta fase, o trabalho concluído é cometido. Além disso, ele verifica se o nó raiz tem algum efeito colateral. Se tiver um efeito, adicione-o à lista (leia mais esta estrutura de dados da lista aqui) ou cometida todos os efeitos colaterais na árvore. Se houver uma atualização programada no comprometimento atual, ele fornecerá um aviso sobre a atualização em cascata no gancho do ciclo de vida . Durante a fase de confirmação, as atualizações estão agendadas no comprometimento atual. Além disso, as atualizações estão agendadas se a fase/estágio não for componentewillmount ou componentwillreceiveprops.
Efeitos do host Commit - Os efeitos do host são comprometidos sempre que uma nova árvore é inserida. A cada nova atualização programada, os efeitos totais do host são calculados. Esse processo é feito em duas fases, a primeira fase executa todas as inserções do nó do host, exclusão, atualização e refúgio e a outra fase executa todo o ciclo de vida e retornos de chamada de REF.
COMPRIMEIRO LIVO CASCO - Quando o primeiro passe foi concluído ao cometer os efeitos do host, a árvore do trabalho em andamento se tornou a árvore atual. Portanto, o trabalho em andamento é atual durante o componenteDIDMount/Update . Nesta fase, todos os retalhos de chamada de vida e referência são comprometidos. Comprometer ciclos de vida acontecem como um passe separado para que todos os canais, atualizações e exclusões em toda a árvore já tenham sido invocados .
Na versão anterior deste DevTool, as métricas de desempenho estavam sendo consultadas em vez de ouvir um tipo de evento. Isso necessário para comentar a linha dentro do pacote react-dom ( react-dom.development.js ) para que essas métricas possam ser capturadas por esta ferramenta.
Mas agora, com a ajuda da API de observador de desempenho, um observador pode ser registrado para ouvir um evento de um tipo específico e obter as entradas (medidas de desempenho). react-perf-devtool fornece uma API no topo do Observador de Desempenho, uma função que registra um observador.
const { registerObserver } = require ( 'react-perf-devtool' )
// assign the observer to the global scope, as the GC will delete it otherwise
window . observer = registerObserver ( )Este observador ouve o evento de medição de desempenho do React. Ele conecta um objeto que contém informações sobre os eventos e medidas de desempenho dos componentes do React no objeto de janela que pode ser acessado dentro da janela inspecionada usando avaliar ().
A cada renderização, esse objeto é atualizado com novas medidas e eventos contam. A extensão cuida da limpeza da memória e também do cache.
Um objeto option e um callback opcional também podem ser transmitidos para registerObserver . O objeto option é útil quando as medidas de desempenho devem ser registradas em um console. O callback recebe resultados analisados e agregados (métricas) como seu argumento que pode ser usado para análises.
Calcular e agregar os resultados ocorre dentro do quadro do aplicativo e não no Devtool. Tem seus próprios benefícios.
Leia o guia contribuinte
Mit
