ReactJS combina la velocidad de JavaScript con capacidades de representación únicas para crear aplicaciones altamente dinámicas, orientadas al rendimiento y con capacidad de respuesta a la entrada del usuario.
El informe State of JS 2018
cita el rendimiento como la razón principal por la que ReactJS ha ganado tanta popularidad en tan poco tiempo. Cuando se trata de opciones para crear aplicaciones de una sola página (SPA), React ofrece ventajas de rendimiento sobre Angular y otros marcos y bibliotecas de JavaScript. Dado que React mantiene un DOM virtual en JavaScript, puede determinar rápidamente los cambios mínimos necesarios para llevar el documento al estado deseado. Dado que el estado de un componente de React se guarda en JavaScript, puede evadir el acceso al DOM.
Para aplicaciones pequeñas, las optimizaciones de rendimiento que ReactJS ofrece listas para usar son más que suficientes. Sin embargo, a medida que sus aplicaciones evolucionan para incluir vistas más complejas, mantener y establecer en paralelo los DOM virtuales puede convertirse en un asunto costoso. Una aplicación grande es un árbol de renderizado enorme, ramificado y complicado. Cada vez que actualiza los accesorios a un nodo, React debe reconfigurar el árbol de renderizado desde el nodo hasta las ramas y, finalmente, la hoja, donde se realizan comparaciones de DOM virtuales.
Sin embargo, a medida que crece la base de usuarios, una aplicación tiende a crecer en complejidades, tener más dependencias e incorporar más complementos de terceros. Su probabilidad de llegar a los cuellos de botella de rendimiento solo se expande. Multiplique eso con un número cada vez mayor de aplicaciones en millones de dispositivos habilitados para la web de varios tamaños y tipos y no podrá evadir una posible pesadilla de rendimiento en el futuro.
Por ejemplo, los usuarios esperan 60 fotogramas por segundo cuando interactúan con una aplicación web en el navegador, lo que le da solo 16,7 ms para representar cada fotograma. Cuando la aplicación es lenta, a menudo tarda demasiado en responder a los eventos del usuario, tarda demasiado en procesar los datos o en volver a representar los nuevos datos. En la mayoría de los casos, no está haciendo un procesamiento de datos complejo en Clock, está perdiendo el tiempo re-renderizando.
Sin duda, incluso la aplicación React más perfectamente diseñada y optimizada requiere una herramienta de monitoreo del rendimiento.
Supervisión de montajes de componentes con Profiler
El número de veces que los componentes se vuelven a renderizar, junto con la cantidad de recursos y el tiempo empleado, puede decir mucho sobre el rendimiento de su aplicación React en producción. El componente Profiler es un componente React integrado que mide el tiempo de “montaje” o “actualización” de un subárbol de componentes. cada vez que se actualiza o monta un componente, la función onRender del generador de perfiles tiene una marca de tiempo. El generador de perfiles proporciona una forma accesible de ver problemas en las aplicaciones React.
import { unstable_Profiler as Profiler } from "react"
<Profiler id="Counter" onRender={callback}>
<Counter />
</Profiler>
El id prop identifica el informe, mientras que la función onRender se asocia con argumentos cuando se monta o revisa el componente Counter.
function callback(id, phase, actualTime, baseTime, startTime, commitTime) {
log("id: " + id, "phase:" + phase, "actualTime:" + actualTime, "baseTime: " + baseTime, "startTime: " + startTime, "commitTime: " + commitTime)
}
Los argumentos de la función son marcas de tiempo recopiladas de cuándo se representó el componente Counter . Echaremos un vistazo a cada uno de los parámetros.
Ídem. El identificador único asociado al componente Generador de perfiles.
fase. Esto detecta la fase ya sea en fase de “montaje” o fase de “actualización”.
en tiempo real. El tiempo que tarda el generador de perfiles en generar actualizaciones confirmadas.
baseTime. El tiempo que tarda uno de los componentes del árbol del generador de perfiles en montarse o actualizarse.
startTime. Registra la marca de tiempo Profiler comienza a medir el tiempo de montaje/renderizado para sus descendientes.
commitTime. El tiempo que tardó React en confirmar una actualización.
Supervisión de componentes que se vuelven a renderizar con las herramientas de desarrollo de React
Durante el desarrollo, si descubre qué componente se está volviendo a renderizar, puede salvar su aplicación en producción de varios cuellos de botella de rendimiento. Las herramientas de desarrollo de React lo simplifican para el desarrollador al colorear los límites de los componentes, cada vez que se vuelven a renderizar. Si los componentes principales se vuelven a renderizar, los bordes que capturan los componentes Counter y Count se resaltarán brevemente.
El tipo de color que aparece depende de la frecuencia o frecuencia con la que se vuelve a representar un componente, lo que le brinda la capacidad de identificar fácilmente qué componente se actualiza con mayor frecuencia para que pueda optimizarlo adecuadamente.
| Verde – Actualización de baja frecuencia
| azul – actualización de frecuencia promedio
V rojo – denota una actualización muy frecuente
Identificación de problemas de rendimiento con React.addons.Perf
Para iniciar Perf, debe llamar a Perf.start() desde la consola, grabar la acción y llamar a Perf.stop() para detener Perf. A continuación, puede llamar a cualquiera de los métodos siguientes para ver conjuntos de mediciones útiles.
Perf.printWasted()
Perf.printWasted() es el método más útil al que llama en React.addons.Perf. Perf.printWasted() le indica la cantidad de tiempo perdido contratando el árbol de renderizado y comparando los DOM virtuales entre sí. Estos componentes mencionados anteriormente son los principales candidatos para mejorar el rendimiento de su aplicación React.
Perf.printInclusive() / Perf.printExclusive()
Perf.printInclusive () y Perf.printExclusive() devuelven la cantidad de tiempo que se asignó para representar los componentes. La mayoría de los desarrolladores no encontrarán este método muy útil, ya que los problemas de rendimiento provocados por el renderizado normalmente se resuelven al no renderizar utilizando el método anterior: Perf.printWasted().
Sin embargo, el método puede ayudarle a identificar los componentes que realizan cálculos pesados en los métodos de ciclo de vida. Aprenderá que después de solucionar problemas de printWasted , es su código de aplicación no optimizado el que está acaparando esos valiosos recursos. Alternativamente, puede traer el generador de perfiles de JavaScript estándar de Chrome DevTool y echar un vistazo a las llamadas de funciones más pesadas directamente.
Perf.printDOM()
Perf.printDOM() muestra todas las operaciones DOM activadas durante la representación de los árboles React. Si has estado jugando con ReactJS durante bastante tiempo, entonces sabes que esta es quizás la parte más engorrosa. Para navegar por una lista interminable de filas y columnas si su aplicación es bastante compleja, puede tomar una eternidad detectar qué fue exactamente lo que salió mal.
Una vez que se renderice su primer conjunto de componentes, espera que los futuros rerenderizados reutilicen los nodos DOM existentes y no creen nodos nuevos, una optimización proporcionada por el DOM virtual de React y otorgada por todos los desarrolladores de React.
Perf.printDOM() es útil para encontrar rarezas peculiares y costosas del navegador o monitorear modificaciones DOM importantes e impredecibles.
Monitoreo sintético para aplicaciones web ReactJS
Si bien los métodos mencionados anteriormente son parte integral de la supervisión del rendimiento de una aplicación React, no imitan las acciones que realiza un usuario típico mientras usa la aplicación. Una plataforma de monitoreo sintético,
combinada con una grabadora de scripts
, puede ejecutar y reproducir scripts pregrabados, simulando transacciones de usuario y acciones típicas del usuario en un navegador real. Por ejemplo, navegación básica, envíos de formularios, transacciones de carrito de compras, juegos en línea, velocidad de desplazamiento, animaciones, etc.
Si bien Perf es una excelente herramienta para monitorear la cantidad de tiempo perdido en el árbol de renderizado y comparar DOM virtual con DOM real, no se traduce en lo que los usuarios pueden experimentar al usar la aplicación. Las soluciones sintéticas de
monitoreo de aplicaciones web
, como las que ofrece
Dotcom-Monitor
, consisten en una herramienta de scripting fácil de usar para escribir sus diversos scripts de prueba de monitoreo. Esos scripts se pueden ejecutar en un entorno de prueba privado y comprueba si la aplicación web tiene varios parámetros a intervalos regulares. El uso de una herramienta de monitoreo sintética que utiliza navegadores reales le permite obtener resultados de rendimiento más precisos.
Además, el monitoreo sintético se puede ejecutar utilizando diferentes dispositivos, navegadores y ubicaciones geográficas. Con las aplicaciones de una sola página, la velocidad de carga inicial de la página no es tan importante como la experiencia del usuario final. No solo es vital garantizar que sus aplicaciones estén en funcionamiento, sino que también se debe monitorear la funcionalidad. Por ejemplo, ¿pueden los usuarios realizar las acciones necesarias y qué servicios o API de terceros, si los hay, están causando retrasos o problemas?
El objetivo de la supervisión de aplicaciones web es automatizar el proceso de identificación de problemas antes de que afecten a un mayor número de usuarios. Con el monitoreo sintético, puede configurar alertas basadas en los requisitos de su aplicación React específica y recibir notificaciones de inmediato cuando algo sale mal. A diferencia de las otras herramientas discutidas anteriormente, el monitoreo sintético adopta un enfoque proactivo, liberándolo del proceso lento de que usted y su equipo tengan que ejecutar pruebas manuales.
Monitoreo de aplicaciones ReactJS: Conclusión
Si bien esas herramientas son útiles para monitorear sus aplicaciones React en entornos de desarrollo, monitorear el rendimiento en producción es un desafío de otra magnitud y tiene más peso. Ceder a la mentalidad de “funciona en mi máquina” es una advertencia cuando el rendimiento de su aplicación en producción está en juego. Las herramientas de monitoreo sintético, por otro lado, le brindan informes de rendimiento desde la perspectiva del usuario final, no desde algunos casos de prueba cliché imaginados por los desarrolladores. Sin embargo, si está buscando subir de nivel su monitoreo de rendimiento de ReactJS, obtenga una
prueba gratuita de 30 días de Dotcom-Monitor hoy
.
