{"id":9700,"date":"2020-05-25T07:23:47","date_gmt":"2020-05-25T07:23:47","guid":{"rendered":"https:\/\/www.dotcom-monitor.com\/blog\/2020\/05\/25\/desafios-monitoreo-reactjs-aplicaciones\/"},"modified":"2026-06-15T02:46:11","modified_gmt":"2026-06-15T02:46:11","slug":"desafios-monitoreo-reactjs-aplicaciones","status":"publish","type":"post","link":"https:\/\/www.dotcom-monitor.com\/blog\/es\/desafios-monitoreo-reactjs-aplicaciones\/","title":{"rendered":"Desaf\u00edos de monitoreo de aplicaciones ReactJS"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

ReactJS combina la velocidad de JavaScript con capacidades de representaci\u00f3n \u00fanicas para crear aplicaciones altamente din\u00e1micas, orientadas al rendimiento y con capacidad de respuesta a la entrada del usuario. El informe State of JS 2018<\/a> <\/span>cita el rendimiento como la raz\u00f3n 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\u00e1gina (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\u00e1pidamente los cambios m\u00ednimos 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.<\/p>

Para aplicaciones peque\u00f1as, las optimizaciones de rendimiento que ReactJS ofrece listas para usar son m\u00e1s que suficientes. Sin embargo, a medida que sus aplicaciones evolucionan para incluir vistas m\u00e1s complejas, mantener y establecer en paralelo los DOM virtuales puede convertirse en un asunto costoso. Una aplicaci\u00f3n grande es un \u00e1rbol de renderizado enorme, ramificado y complicado. Cada vez que actualiza los accesorios a un nodo, React debe reconfigurar el \u00e1rbol de renderizado desde el nodo hasta las ramas y, finalmente, la hoja, donde se realizan comparaciones de DOM virtuales.<\/p>

Sin embargo, a medida que crece la base de usuarios, una aplicaci\u00f3n tiende a crecer en complejidades, tener m\u00e1s dependencias e incorporar m\u00e1s complementos de terceros. Su probabilidad de llegar a los cuellos de botella de rendimiento solo se expande. Multiplique eso con un n\u00famero cada vez mayor de aplicaciones en millones de dispositivos habilitados para la web de varios tama\u00f1os y tipos y no podr\u00e1 evadir una posible pesadilla de rendimiento en el futuro.<\/p>

Por ejemplo, los usuarios esperan 60 fotogramas por segundo cuando interact\u00faan con una aplicaci\u00f3n web en el navegador, lo que le da solo 16,7 ms para representar cada fotograma. Cuando la aplicaci\u00f3n 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\u00eda de los casos, no est\u00e1 haciendo un procesamiento de datos complejo en Clock, est\u00e1 perdiendo el tiempo re-renderizando.<\/p>

Sin duda, incluso la aplicaci\u00f3n React m\u00e1s perfectamente dise\u00f1ada y optimizada requiere una herramienta de monitoreo del rendimiento.<\/p>

\u00a0<\/p>

Supervisi\u00f3n de montajes de componentes con Profiler<\/h3>

El n\u00famero 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\u00f3n React en producci\u00f3n. El componente Profiler es un componente React integrado que mide el tiempo de “montaje” o “actualizaci\u00f3n” de un sub\u00e1rbol de componentes. cada vez que se actualiza o monta un componente,<\/span> <\/span>la funci\u00f3n onRender<\/em> del generador de perfiles tiene una marca de tiempo. El generador de perfiles proporciona una forma accesible de ver problemas en las aplicaciones React.<\/p>

\u00a0<\/p>

import { unstable_Profiler as Profiler } from \"react\"\n\n<Profiler id=\"Counter\" onRender={callback}>\n\n    <Counter \/>\n\n<\/Profiler><\/pre>
\u00a0<\/p>
El id<\/em> prop identifica el informe, mientras que la funci\u00f3n onRender<\/em> se asocia con argumentos cuando se monta o revisa<\/em> el componente Counter.<\/p>
\u00a0<\/p>
function callback(id, phase, actualTime, baseTime, startTime, commitTime) {\n\nlog(\"id: \" + id, \"phase:\" + phase, \"actualTime:\" + actualTime,   \"baseTime: \" + baseTime, \"startTime: \" + startTime, \"commitTime: \" +  commitTime)\n\n}<\/pre>
\u00a0<\/p>
Los argumentos de la funci\u00f3n son marcas de tiempo recopiladas de cu\u00e1ndo se represent\u00f3 el componente Counter<\/em> . Echaremos un vistazo a cada uno de los par\u00e1metros.<\/p>
\u00a0<\/p>
\u00cddem<\/strong>. El identificador \u00fanico asociado al componente Generador de perfiles.<\/p>
fase<\/strong>. Esto detecta la fase ya sea en fase de “montaje” o fase de “actualizaci\u00f3n”.<\/p>
en tiempo real<\/strong>. El tiempo que tarda el generador de perfiles en generar actualizaciones confirmadas.<\/p>
baseTime<\/strong>. El tiempo que tarda uno de los componentes del \u00e1rbol del generador de perfiles en montarse o actualizarse.<\/p>
startTime<\/strong>. Registra la marca de tiempo Profiler comienza a medir el tiempo de montaje\/renderizado para sus descendientes.<\/p>
commitTime<\/strong>. El tiempo que tard\u00f3 React en confirmar una actualizaci\u00f3n.<\/p>
\u00a0<\/p>
Supervisi\u00f3n de componentes que se vuelven a renderizar con las herramientas de desarrollo de React<\/h3>
Durante el desarrollo, si descubre qu\u00e9 componente se est\u00e1 volviendo a renderizar, puede salvar su aplicaci\u00f3n en producci\u00f3n de varios cuellos de botella de rendimiento. Las herramientas de desarrollo de React lo simplifican para el desarrollador al colorear los l\u00edmites 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<\/em> y Count<\/em> se resaltar\u00e1n brevemente.<\/p>
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\u00e1cilmente qu\u00e9 componente se actualiza con mayor frecuencia para que pueda optimizarlo adecuadamente.<\/p>
\u00a0<\/p>
| Verde – Actualizaci\u00f3n de baja frecuencia <\/em><\/p>
| azul – actualizaci\u00f3n de frecuencia promedio <\/em><\/p>
V rojo – denota una actualizaci\u00f3n muy frecuente <\/em><\/p>
\u00a0<\/p>
Identificaci\u00f3n de problemas de rendimiento con React.addons.Perf<\/h3>
Para iniciar Perf, debe llamar a Perf.start() desde la consola, grabar la acci\u00f3n y llamar a Perf.stop()<\/em> para detener Perf.<\/em> A continuaci\u00f3n, puede llamar a cualquiera de los m\u00e9todos siguientes para ver conjuntos de mediciones \u00fatiles.<\/p>
Perf.printWasted()<\/strong><\/pre>
Perf.printWasted()<\/em> es el m\u00e9todo m\u00e1s \u00fatil al que llama en React.addons.Perf. Perf.printWasted() le indica la cantidad de tiempo perdido contratando el \u00e1rbol de renderizado y comparando los DOM virtuales entre s\u00ed. Estos componentes mencionados anteriormente son los principales candidatos para mejorar el rendimiento de su aplicaci\u00f3n React.<\/p>
\u00a0<\/p>
Perf.printInclusive() \/ Perf.printExclusive()<\/strong><\/pre>
Perf.printInclusive<\/em> () y Perf.printExclusive()<\/em> devuelven la cantidad de tiempo que se asign\u00f3 para representar los componentes. La mayor\u00eda de los desarrolladores no encontrar\u00e1n este m\u00e9todo muy \u00fatil, ya que los problemas de rendimiento provocados por el renderizado normalmente se resuelven al no renderizar utilizando el m\u00e9todo anterior: Perf.printWasted().<\/em><\/p>
Sin embargo, el m\u00e9todo puede ayudarle a identificar los componentes que realizan c\u00e1lculos pesados en los m\u00e9todos de ciclo de vida. Aprender\u00e1 que despu\u00e9s de solucionar problemas de printWasted<\/em> , es su c\u00f3digo de aplicaci\u00f3n no optimizado el que est\u00e1 acaparando esos valiosos recursos. Alternativamente, puede traer el generador de perfiles de JavaScript est\u00e1ndar de Chrome DevTool y echar un vistazo a las llamadas de funciones m\u00e1s pesadas directamente.<\/p>
\u00a0<\/p>
Perf.printDOM()<\/strong><\/pre>
Perf.printDOM()<\/em> muestra todas las operaciones DOM activadas durante la representaci\u00f3n de los \u00e1rboles React. Si has estado jugando con ReactJS durante bastante tiempo, entonces sabes que esta es quiz\u00e1s la parte m\u00e1s engorrosa. Para navegar por una lista interminable de filas y columnas si su aplicaci\u00f3n es bastante compleja, puede tomar una eternidad detectar qu\u00e9 fue exactamente lo que sali\u00f3 mal.<\/p>
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\u00f3n proporcionada por el DOM virtual de React y otorgada por todos los desarrolladores de React.<\/p>
Perf.printDOM()<\/em> es \u00fatil para encontrar rarezas peculiares y costosas del navegador o monitorear modificaciones DOM importantes e impredecibles.<\/p>
\u00a0<\/p>
Monitoreo sint\u00e9tico para aplicaciones web ReactJS<\/h3>
Si bien los m\u00e9todos mencionados anteriormente son parte integral de la supervisi\u00f3n del rendimiento de una aplicaci\u00f3n React, no imitan las acciones que realiza un usuario t\u00edpico mientras usa la aplicaci\u00f3n. Una plataforma de monitoreo sint\u00e9tico, combinada con una grabadora de scripts<\/span>, puede ejecutar y reproducir scripts pregrabados, simulando transacciones de usuario y acciones t\u00edpicas del usuario en un navegador real. Por ejemplo, navegaci\u00f3n b\u00e1sica, env\u00edos de formularios, transacciones de carrito de compras, juegos en l\u00ednea, velocidad de desplazamiento, animaciones, etc.<\/p>
Si bien Perf es una excelente herramienta para monitorear la cantidad de tiempo perdido en el \u00e1rbol de renderizado y comparar DOM virtual con DOM real, no se traduce en lo que los usuarios pueden experimentar al usar la aplicaci\u00f3n. Las soluciones sint\u00e9ticas de monitoreo de aplicaciones web<\/a><\/span>, como las que ofrece Dotcom-Monitor<\/a><\/span>, consisten en una herramienta de scripting f\u00e1cil 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\u00f3n web tiene varios par\u00e1metros a intervalos regulares. El uso de una herramienta de monitoreo sint\u00e9tica que utiliza navegadores reales le permite obtener resultados de rendimiento m\u00e1s precisos.<\/p>
Adem\u00e1s, el monitoreo sint\u00e9tico se puede ejecutar utilizando diferentes dispositivos, navegadores y ubicaciones geogr\u00e1ficas. Con las aplicaciones de una sola p\u00e1gina, la velocidad de carga inicial de la p\u00e1gina no es tan importante como la experiencia del usuario final. No solo es vital garantizar que sus aplicaciones est\u00e9n en funcionamiento, sino que tambi\u00e9n se debe monitorear la funcionalidad. Por ejemplo, \u00bfpueden los usuarios realizar las acciones necesarias y qu\u00e9 servicios o API de terceros, si los hay, est\u00e1n causando retrasos o problemas?<\/p>
El objetivo de la supervisi\u00f3n de aplicaciones web es automatizar el proceso de identificaci\u00f3n de problemas antes de que afecten a un mayor n\u00famero de usuarios. Con el monitoreo sint\u00e9tico, puede configurar alertas basadas en los requisitos de su aplicaci\u00f3n React espec\u00edfica y recibir notificaciones de inmediato cuando algo sale mal. A diferencia de las otras herramientas discutidas anteriormente, el monitoreo sint\u00e9tico adopta un enfoque proactivo, liber\u00e1ndolo del proceso lento de que usted y su equipo tengan que ejecutar pruebas manuales.<\/p>
\u00a0<\/p>
Monitoreo de aplicaciones ReactJS: Conclusi\u00f3n<\/h3>
Si bien esas herramientas son \u00fatiles para monitorear sus aplicaciones React en entornos de desarrollo, monitorear el rendimiento en producci\u00f3n es un desaf\u00edo de otra magnitud y tiene m\u00e1s peso. Ceder a la mentalidad de “funciona en mi m\u00e1quina” es una advertencia cuando el rendimiento de su aplicaci\u00f3n en producci\u00f3n est\u00e1 en juego. Las herramientas de monitoreo sint\u00e9tico, por otro lado, le brindan informes de rendimiento desde la perspectiva del usuario final, no desde algunos casos de prueba clich\u00e9 imaginados por los desarrolladores. Sin embargo, si est\u00e1 buscando subir de nivel su monitoreo de rendimiento de ReactJS, obtenga una prueba gratuita de 30 d\u00edas de Dotcom-Monitor hoy<\/a><\/span>.<\/p>
\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"
ReactJS combina la velocidad de JavaScript con capacidades de representaci\u00f3n \u00fanicas para crear aplicaciones altamente din\u00e1micas, 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\u00f3n principal por la que ReactJS ha ganado tanta popularidad en tan poco tiempo. Cuando […]<\/p>\n","protected":false},"author":21,"featured_media":8289,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-9700","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/www.dotcom-monitor.com\/blog\/es\/wp-json\/wp\/v2\/posts\/9700","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dotcom-monitor.com\/blog\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dotcom-monitor.com\/blog\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dotcom-monitor.com\/blog\/es\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dotcom-monitor.com\/blog\/es\/wp-json\/wp\/v2\/comments?post=9700"}],"version-history":[{"count":0,"href":"https:\/\/www.dotcom-monitor.com\/blog\/es\/wp-json\/wp\/v2\/posts\/9700\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.dotcom-monitor.com\/blog\/es\/wp-json\/wp\/v2\/media\/8289"}],"wp:attachment":[{"href":"https:\/\/www.dotcom-monitor.com\/blog\/es\/wp-json\/wp\/v2\/media?parent=9700"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dotcom-monitor.com\/blog\/es\/wp-json\/wp\/v2\/categories?post=9700"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dotcom-monitor.com\/blog\/es\/wp-json\/wp\/v2\/tags?post=9700"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}