react perf devtool
vtool
Buscando mantenedores
Un devTool para inspeccionar el rendimiento de los componentes React
Introducción
Manifestación
Usos
Instalar
Uso
Descripción
Fases
Implementación
Que contribuye
Licencia
React Performance DevTool es una extensión del navegador para inspeccionar el rendimiento de los componentes React. Examina estadísticamente el rendimiento de los componentes React en función de las medidas que se recopilan por React usando window.performance API de rendimiento.
Junto con la extensión del navegador, las medidas también pueden inspeccionarse en una consola. Consulte la sección de uso para obtener más detalles.
Este proyecto comenzó con el propósito de extender el trabajo realizado por Will Chen en una propuesta de Tabla de rendimiento React. Puedes leer más al respecto aquí.
Una demostración de la extensión que se utiliza para examinar el rendimiento de los componentes React en mi sitio web.
Las medidas de rendimiento también se pueden registrar a una consola. Con cada RE-RENDER, las medidas se actualizan e registran a la consola.
Eliminar o desmontar las instancias de componentes que no se están utilizando.
Inspeccione lo que está bloqueando o tomando más tiempo después de que se haya iniciado una operación.
Examine la tabla y vea para qué componentes, debe escribir que debe componente el gancho de ciclo de vida.
Examine qué componentes tardan más en cargarse.
Para usar este DevTool, deberá instalar un módulo NPM que registre un oyente (lea más sobre esto en la sección de uso) y la extensión del navegador.
Instalación de la extensión
Las extensiones a continuación representan la versión estable actual.
Instalación del módulo NPM
npm install react-perf-devtool
Una construcción umd también está disponible a través de impkg
< script crossorigin src = "https://unpkg.com/[email protected]/lib/npm/hook.js" > </ script >Esta extensión y paquete también depende de React. Asegúrese de tenerlos instalados también.
Nota: el módulo NPM es importante y se requiere para usar el DevTool. Así que asegúrese de instalarlo antes de usar la extensión del navegador.
Esta sección de la documentación explica el uso de DevTool y la API para registrar un observador en una aplicación React.
React react-perf-devtool se basa en la window.PerformanceObserver nativa. Para obtener más información, consulte los documentos oficiales de Mozilla aquí.
Para usar esta extensión DevTool, deberá registrar un observador en su aplicación que observará una recopilación de datos (medidas de rendimiento) durante un tiempo.
Registrar observador
Registrar un observador es muy simple y está a solo una llamada de la función de distancia. ¡Veamos cómo!
const { registerObserver } = require ( 'react-perf-devtool' )
// assign the observer to the global scope, as the GC will delete it otherwise
window . observer = registerObserver ( ) Puede colocar este código dentro de su archivo index.js (recomendado) o cualquier otro archivo en su aplicación.
Nota: esto solo debe usarse en modo de desarrollo cuando necesita inspeccionar el rendimiento de los componentes React. Asegúrese de eliminarlo al construir para su producción.
El registro de un observador engancha un objeto que contiene información sobre los eventos y las medidas de rendimiento de los componentes React al objeto de la ventana, a los que se puede acceder dentro de la ventana inspeccionada usando eval ().
Con cada Represente, este objeto se actualiza con nuevas medidas y recuento de eventos. La extensión se encarga de limpiar la memoria y también el caché.
También puede pasar un objeto option y una callback opcional que recibe un argumento que contiene las medidas analizadas y agregadas
Usando la devolución de llamada
También se puede pasar una devolución de llamada opcional a registerObserver que recibe medidas analizadas como argumento.
Puede usar esta devolución de llamada para inspeccionar las medidas analizadas y agregadas, o puede integrarla con cualquier otro caso de uso. También puede aprovechar estas medidas de rendimiento utilizando Google Analytics enviando estas medidas al tablero de análisis. Este proceso está documentado aquí.
Ejemplo -
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 ) Después de registrar el observador, inicie su servidor de desarrollo local y vaya a http://localhost:3000/ .
Nota: esta extensión funciona solo para reaccionar 16 o por encima de las versiones de la misma.
Después de instalar la extensión con éxito, verá una pestaña llamada React Performance en Chrome Developer Tools.
Las medidas de rendimiento también se pueden registrar a la consola. Sin embargo, el proceso de impresión de las medidas no es directo. Deberá configurar un servidor que escuche las medidas. Para esto, puede usar Micro by Zeit, que es un microservicio HTTP.
npm install --save micro
Puede aprobar un objeto de opción como argumento para registerObserver para habilitar el registro y la configuración de un número de puerto.
Usando el objeto de opción
{
shouldLog : boolean , // default value: false
port : number // default value: 8080
timeout : number // default value: 2000
} Puede pasar tres propiedades al objeto option , shouldLog y port .
shouldLog : toma un valor booleano . Si se establece en True, las medidas se registrarán en la consola.
port - Número de puerto para el servidor donde se enviarán las medidas
timeout : un valor de tiempo de espera para diferir la inicialización de la extensión.
Si su aplicación toma tiempo para cargarse, es mejor diferir la inicialización de la extensión especificando el valor de tiempo de espera a través de la propiedad timeout . Esto asegura que la extensión se cargará solo después de que su aplicación se haya cargado correctamente en el navegador para que se puedan representar las medidas actualizadas. Sin embargo, puede omitir esta propiedad si su aplicación está en pequeño tamaño.
Ejemplo
// 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 de las medidas
A continuación se muestra el esquema de las medidas de rendimiento que se registran en la consola.
{
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
También puede inspeccionar el rendimiento de componentes específicos utilizando opciones a través de la propiedad components .
Ejemplo -
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 ) La sección de descripción general representa una descripción general del tiempo total (%) tomado por todos los componentes de su aplicación.
Tiempo tomado por todos los componentes: muestra el tiempo que lleva todos los componentes (combinando todas las fases).
Duración de tiempo para comprometer cambios: muestra el tiempo que pasó en la comprensión de los cambios. Lea más sobre esto aquí
Duración de tiempo para cometer efectos del huésped: muestra el tiempo dedicado a cometer efectos del huésped, es decir, comprometerse cuando se inserta un nuevo árbol (actualización) y no. de efectos del huésped (recuento de efectos en la confirmación).
Duración de tiempo para llamar a los métodos de ciclo de vida: informa la duración del tiempo de llamar a los ganchos del ciclo de vida y un total de métodos llamados, cuando un gancho de ciclo de vida programa una actualización en cascada.
Tiempo total
Borrar : el botón Clear borra las medidas de las tablas y también limpia los resultados.
Recargar la ventana inspeccionada : este botón recarga la ventana inspeccionada y muestra las nuevas medidas.
Eventos pendientes : esto indica las medidas pendientes (datos de rendimiento React).
Esta sección muestra el tiempo tomado por un componente en una fase, número de instancias de un componente y tiempo total que combina todas las fases en MS y %
A continuación se muestran las diferentes fases para las cuales React mide el rendimiento:
Reaccionar la reconciliación del árbol : en esta fase, reaccionar hace que el nodo raíz y cree un trabajo en la fibra de progreso. Si hubiera algunas actualizaciones en cascada mientras se reconciliaron, pausará cualquier medida activa y las reanudará en un bucle diferido. Esto es causado cuando una actualización de nivel superior interrumpe el renderizado anterior. Si se lanzó un error durante la fase de renderizado, captura el error al encontrar el límite de error más cercano o usa la raíz si no hay límite de error.
Cambios de confirmación : en esta fase, el trabajo que se completó se compromete. Además, verifica si el nodo raíz tiene algún efecto secundario. Si tiene un efecto, agrégalo a la lista (lea más esta estructura de datos de la lista aquí) o confirme todos los efectos secundarios en el árbol. Si hay una actualización programada en la confirmación actual, entonces ofrece una advertencia sobre la actualización en cascada en Lifecycle Hook . Durante la fase de confirmación, las actualizaciones están programadas en la confirmación actual. Además, las actualizaciones están programadas si la fase/etapa no es componente de mando o componentewillReceiveProps.
Efectos del huésped del huésped : los efectos del huésped se comprometen cada vez que se inserta un nuevo árbol. Con cada nueva actualización programada, se calculan los efectos totales del host. Este proceso se realiza en dos fases, la primera fase realiza todas las inserciones del nodo del host, la eliminación, la actualización y los informes de referencia y la otra fase realiza todas las devoluciones de llamadas del ciclo de vida y REF.
Comprometer el ciclo de vida : cuando se completó el primer pase mientras cometía los efectos del huésped, el árbol de trabajo en progreso se convirtió en el árbol actual. Por lo tanto, el trabajo en progreso es actual durante ComponentDidMount/Update . En esta fase, se comprometen todos los ciclos de vida y las devoluciones de llamada de Ref. Comprometer los ciclos de vida ocurren como un pase separado para que ya se hayan invocado todas las ubicaciones, actualizaciones y deleciones en todo el árbol .
En la versión anterior de este Devtool, las métricas de rendimiento se estaban consultando en lugar de escuchar un tipo de evento. Esto requirió comentar la línea dentro del paquete react-dom ( react-dom.development.js ) para que estas métricas puedan ser capturadas por esta herramienta.
Pero ahora, con la ayuda de la API de observador de rendimiento, se puede registrar un observador para escuchar un evento de un tipo particular y obtener las entradas (medidas de rendimiento). react-perf-devtool proporciona una API además del Observador de rendimiento, una función que registra a un 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 escucha el evento de medición de rendimiento React. Gunda un objeto que contiene información sobre los eventos y las medidas de rendimiento de los componentes React al objeto de la ventana al que se puede acceder dentro de la ventana inspeccionada usando eval ().
Con cada Represente, este objeto se actualiza con nuevas medidas y recuento de eventos. La extensión se encarga de limpiar la memoria y también el caché.
Un objeto option y una callback opcional también se pueden pasar a registerObserver . El objeto option es útil cuando las medidas de rendimiento deben registrarse en una consola. La callback recibe resultados (métricos) analizados y agregados como su argumento que luego puede usarse para los análisis.
Calcular y agregar los resultados ocurre dentro del marco de la aplicación y no en el DevTool. Tiene sus propios beneficios.
Lea la guía contribuyente
MIT
