Como Medir la Velocidad de Un Componente de React

Nube Colectiva

hace 6 meses

Como Medir la Velocidad de Un Componente de React

En esta página:

Sí, nuestro proyecto creado con la librería React está optimizado.

Es sinónimo de una buena experiencia en los usuarios cuando lo visitan.

Para optimizar un proyecto de React, es importante medir la velocidad de ejecución de sus componentes.

En este tutorial te enseñaré a Como Medir la Velocidad de Un Componente de React, vamos con ello.

La mayoría de proyectos creados en React JS están basados en componentes

Existen diferentes maneras de medir la velocidad de un componente de React.

Proyecto de React a Medir la Velocidad de Sus Componentes

Tengo el siguiente código perteneciente al tutorial Como crear una Página Web con React 16.9 y Bootstrap 4.

En el creamos un componente llamado Home que instancia 4 componentes llamados Menu, Slider, Servicios y Footer:


// Archivo Home.js 

import React from 'react';

import Menu from '../menu/Menu';
import Slider from './slider/Slider';
import Servicios from './servicios/Servicios';
import Footer from '../footer/Footer';


class Home extends React.Component {

	render() {

		return(

			<>

			<Menu />

			<main role="main" className="flex-shrink-0 mt-5">

		        <div className="container">
		  	  		
		  	  		<Slider />
		  	  		<Servicios />

		  	  		<hr className="featurette-divider" />

		        </div>

	  		</main>

	  		<Footer />

	  		</>

		)

	}

}

export default Home;

// Archivo Home.js

import React from 'react';

import Menu from '../menu/Menu';

import Slider from './slider/Slider';

import Servicios from './servicios/Servicios';

import Footer from '../footer/Footer';

class Home extends React.Component {

render() {

return(

</div>

</main>

</>

)

}

export default Home;

En total serían 5 componentes, contando el componente Home.

Te compartiré 2 de las mejores maneras de medir la velocidad de los componentes de React a continuación.

Medir la Velocidad de Un Componente de React con React Developer Tools

Abre el navegador Google Chrome e instala esta extensión oficial de React.

Presiona la tecla F12 (en macOS y Linux su similar), para abrir las Google Chrome DevTools.

Dirígete al panel Profiler, presiona el botón de grabación teniendo tu proyecto de React abierto.

Detén la grabación y te brindará información con la velocidad que tomo en cargarse cada uno de los componentes.

Si te diriges a la pestaña Ranked, podrás ver una lista ordenada de mayor tiempo a menor tiempo en que tomaron en cargar los componentes de tu proyecto:

También puedes encontrar información importante en las pestañas Flamegraph y Timeline, sobre la velocidad de carga de tus componentes de React.

Puedes usar los 2 métodos de este tutorial en puertos personalizados, aparte del puerto 3000.

Medir la Velocidad de Un Componente de React con Profiler

React cuenta con el componente Profiler que te permite medir la velocidad de carga y renderizado de un componente.

Para usarlo debes importar Profiler y usar el método ClockPerformance con ciertos parámetros para la información que deseamos obtener.

Cada parámetro muestra una información determinada pero la que mide la velocidad es el parámetro actualTime.

actualTime mide el tiempo transcurrido en que el componente empezó a renderizarse y el momento en que terminó de renderizarse.

Puedes obtener más información sobre los otros parámetros en este enlace.

Envuelve el componente con la etiqueta <Profiler></Profiler> y colócale un id para distinguirlo de los demás componentes:


// Archivo Home.js 

import React, { Profiler } from 'react';  // Importamos Profiler

import Menu from '../menu/Menu';
import Slider from './slider/Slider';
import Servicios from './servicios/Servicios';
import Footer from '../footer/Footer';


class Home extends React.Component {

	// Usamos el método ClockPerformance y definimos ciertos parámetros para los datos 
    // Imprimimos en la consola del navegador la información 
	clockPerformance(
		profilerId,
		mode,
		actualTime,
		baseTime,
		startTime,
		commitTime,
	  ) {
		console.log({
		  profilerId,
		  mode,
		  actualTime,
		  baseTime,
		  startTime,
		  commitTime,
		});
	  }

	render() {

		return(	

			<>		
			
			// Envolvemos el componente con la etiqueta '<Profiler>'
			<Profiler id="menu" onRender={this.clockPerformance}>
			<Menu /> 
			</Profiler>

			<main role="main" className="flex-shrink-0 mt-5">

		        <div className="container">
					
				    // Envolvemos el componente con la etiqueta '<Profiler>'
					<Profiler id="slider" onRender={this.clockPerformance}>
		  	  		<Slider />
					</Profiler>

					// Envolvemos el componente con la etiqueta '<Profiler>'
					<Profiler id="servicios" onRender={this.clockPerformance}>
		  	  		<Servicios />
					</Profiler>

		  	  		<hr className="featurette-divider" />

		        </div>

	  		</main>

			// Envolvemos el componente con la etiqueta '<Profiler>'
			<Profiler id="footer" onRender={this.clockPerformance}>
	  		<Footer />
			</Profiler>

	  		</>			

		)

	}

}

export default Home;

// Archivo Home.js

import React, { Profiler } from 'react'; // Importamos Profiler

import Menu from '../menu/Menu';

import Slider from './slider/Slider';

import Servicios from './servicios/Servicios';

import Footer from '../footer/Footer';

class Home extends React.Component {

// Usamos el método ClockPerformance y definimos ciertos parámetros para los datos

// Imprimimos en la consola del navegador la información

clockPerformance(

profilerId,

mode,

actualTime,

baseTime,

startTime,

commitTime,

) {

console.log({

profilerId,

mode,

actualTime,

baseTime,

startTime,

commitTime,

});

}

render() {

return(

// Envolvemos el componente con la etiqueta '<Profiler>'

</Profiler>

// Envolvemos el componente con la etiqueta '<Profiler>'

</Profiler>

// Envolvemos el componente con la etiqueta '<Profiler>'

</Profiler>

</div>

</main>

// Envolvemos el componente con la etiqueta '<Profiler>'

</Profiler>

</>

)

}

export default Home;

Abre la consola del navegador y verás la información:

Fijate que cada componente tiene un id para distinguirse de los demás

El tiempo se muestra en milisegundos.

Así es como puedes medir la velocidad de un componente de React JS.

Aprende a Como Poner Nombre de Clase CSS en React JS

Conclusión

En este tutorial has aprendido a Como Medir la Velocidad de Un Componente de React.

Te será de ayuda para analizar la velocidad de los componentes de tu proyecto de React JS.

Practica y practica mucho, solo así serás un experto midiendo la velocidad de tus componentes en React.

Nota(s)

No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.