Como Medir la Velocidad de Un Componente de React

4 minuto(s)

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.

Midiendo la velocidad de un proyecto creado con React JS — 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:

Midiendo la velocidad de un componente de React con las React Developer Tools — Esta extensión es fácil de usar

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;