¿Cuánta RAM está usando tu UseMemo? ¡Vamos a perfilarlo!

Rate this content
Bookmark
Slides

¡Memoriza todas las cosas!, es lo que la mayoría de las guías de React te dirán, explicando cómo su costo de memoria es insignificante en comparación con sus beneficios de rendimiento, pero ¿alguien realmente lo ha medido alguna vez? ¿Qué tal hacerlo en una aplicación React compleja con varios miles de componentes? Resulta que obtener esa respuesta no es simple en absoluto, y requiere adentrarse en el complejo mundo del perfilado de memoria de Chrome. Esta charla explorará los conceptos básicos del perfilado de heap, avanzando hacia herramientas y técnicas más avanzadas para analizar el uso de memoria en tu aplicación React, incluyendo cómo perfilarlo en tu pipeline de CI y responder a tus propias preguntas de optimización escribiendo analizadores de heap personalizados.

This talk has been presented at React Day Berlin 2023, check out the latest edition of this React Conference.

FAQ

Es crucial debido a que los navegadores imponen límites de memoria, el uso elevado de memoria intensifica la actividad del recolector de basura afectando el rendimiento y puede empeorar la experiencia del usuario al ralentizar otros procesos en el dispositivo.

Identificar los componentes que consumen más memoria, optimizar el manejo de datos y estructuras dentro de la aplicación, y usar pruebas de memoria automatizadas en ciclos de integración continua para detectar y resolver problemas a tiempo.

El Analizador de Memoria de Chrome es altamente recomendado para obtener una visión detallada del uso de memoria a través de instantáneas del heap y muestreo de asignaciones. Además, herramientas como Memlab permiten realizar análisis más profundos y personalizados.

La memoria estática se refiere a asignaciones que permanecen estables durante la ejecución de la aplicación, mientras que la memoria transitoria implica asignaciones que se crean y liberan rápidamente, generando picos que pueden afectar el rendimiento.

Cada hook en React mantiene estructuras de datos que pueden aumentar significativamente el uso de memoria. Especialmente los useMemos y otros hooks similares, que no solo almacenan datos sino también mantienen estructuras adicionales necesarias para su funcionamiento.

Controlar el tamaño y cantidad de asignaciones ayuda a mantener el uso de memoria dentro de los límites aceptables, evitando problemas de rendimiento y asegurando una buena experiencia del usuario al mantener la aplicación rápida y eficiente.

Memlab es una herramienta avanzada que permite detectar fugas de memoria, analizar asignaciones y evaluar el impacto de diferentes estructuras de datos en la memoria. Es personalizable y puede integrarse en ciclos de CI para revisiones periódicas.

Giulio Zausa‮
Giulio Zausa‮
20 min
12 Dec, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

El uso de memoria a menudo se pasa por alto en las aplicaciones web, pero el uso excesivo de memoria afecta el rendimiento y la experiencia del usuario. Es importante analizar el uso de memoria y optimizarlo, considerando conceptos como count versus size y shallow versus retain memory. El Chrome Memory Profiler y Memlab son herramientas útiles para analizar el uso de memoria. Al optimizar los componentes de React y usar herramientas como Memlab, el uso de memoria se puede reducir significativamente. Los hooks de React pueden ser costosos para proyectos a gran escala, y el análisis de memoria es una tarea desafiante.

1. Uso de memoria en aplicaciones web

Short description:

El uso de memoria a menudo se pasa por alto en las aplicaciones web. Optimizamos una aplicación React compleja, pero nuestro uso de memoria se volvió muy alto. Los navegadores limitan el uso de memoria, y el uso excesivo de memoria afecta el rendimiento y la experiencia del usuario.

El uso de memoria es una parte comúnmente pasada por alto en las aplicaciones web modernas, con frameworks como React intercambiándolo por performance y facilidad de desarrollo. La razón por la que hacemos esto es que normalmente las aplicaciones web son lo suficientemente simples. Y la memoria en los clientes es abundante. ¿Pero es esto siempre el caso? ¿Y qué hacemos cuando no lo es?

Hola, soy Giulio Zauza, soy ingeniero de software. Y quería traerte algunas lecciones que aprendí de la manera difícil mientras optimizaba una aplicación React compleja. De hecho, estoy trabajando en una aplicación web compleja llamada Flux. Es una herramienta CAD electrónica basada en navegador que permite un diseño rápido y colaborativo de circuitos eléctricos y PCB design. Bajo su capó, es una gran aplicación de tipo script que usa WebGL para renderizar documentos complejos, y está construida usando React, 3.js y Reactive Fiber.

Estamos trabajando duro en performance ya que queríamos que la aplicación fuera rápida y receptiva pero también escalable. Necesitamos poder soportar documentos gigantes con miles de componentes, cada uno hecho de docenas de formas complejas. Originalmente, pensamos que el tiempo congelado durante las interacciones y FPS eran las cosas a optimizar, pero pronto nos dimos cuenta de que eso era en realidad solo una parte del panorama. Al hacer ese tipo de optimization, a veces intercambias el uso de memoria por performance, lo cual es algo que en nuestro caso se volvió en nuestra contra. De hecho, construimos un sistema de renderizado usando mucha memorización siempre que fue posible, y usamos cachés para prevenir re-renderizados, y usamos muchas precomputaciones. Esto inicialmente comenzó a hacer que la performance fuera mejor, pero en cierto punto, en realidad empeoró las cosas. El uso de memoria era muy, muy alto al abrir proyectos más grandes y superaba fácilmente la marca del gigabyte. Hicimos esas optimizaciones porque seguimos lo que todavía se considera una mejor práctica para performance con React, que es usar la memorización tanto como sea posible. De hecho, incluso hay un artículo famoso que aboga por usar la memorización de React para cada valor de símbolo conocido. Lo que encontramos, sin embargo, es que usar esta estrategia puede volverse perjudicial ya que afectará su uso de memoria de formas incluso inesperadas.

Bueno, pero podrías preguntar, ¿por qué nos importa el uso de memoria? Especialmente ahora que los clientes tienen más RAM que nunca. Bueno, hay tres formas en las que el uso de memoria afecta negativamente a su aplicación. La primera es que los navegadores limitan mucho su uso de memoria. Chrome para escritorio, por ejemplo, tiene un límite de memoria duro alrededor de cuatro gigabytes por pestaña. En el momento en que superas ese límite, el navegador simplemente matará tu pestaña sin ninguna forma de recuperarte de ello. Y este límite se vuelve aún menor en dispositivos móviles como Safari, iOS, por ejemplo. La segunda razón es que cuanto más uso de memoria pesa en el recolector de basura. Incluso si estás tratando de optimizar solo por velocidad, probablemente verás muchas entradas en tus perfiles de tiempo relacionados con actividades de recolección de basura como mi GC mayor y menor. Eso está sucediendo cuando se realizan demasiadas asignaciones de memoria en un corto período de tiempo y el navegador se ve obligado a pausar tu aplicación para ocuparse de ellas. Y la tercera razón es que usar demasiada memoria empeora la user experience. Muchos usuarios están usando su dispositivo para varias cosas a la vez. Y esto significa que si tu aplicación web está reteniendo gigabytes enteros de memoria, harás que la user experience de todo lo demás que se ejecuta en su cliente sea significativamente peor.

2. Análisis del Uso de Memoria y Herramientas

Short description:

Es importante vigilar el consumo de memoria y optimizarlo. Nos centraremos en identificar el uso de memoria y hacer distinciones. El uso de memoria transitoria puede ser difícil de detectar y puede causar fallos en la aplicación. Los conceptos de conteo versus tamaño y memoria superficial versus retenida son importantes. Los diferentes tipos de asignación en JavaScript VM y el código JS también ocupan espacio. Vamos a explorar las herramientas disponibles para analizar el uso de memoria.

Y debido a esas razones, diría que probablemente, independientemente del tipo de aplicación que estés construyendo, siempre es una buena idea vigilar el consumo de memoria de tu aplicación y optimizarlo cuando sea necesario, especialmente ahora que Chrome está empezando a informar a los usuarios sobre el consumo de memoria de las pestañas individuales cuando pasas el cursor sobre el título de la pestaña. Imagina ejecutar una simple aplicación de lista de tareas y ver que ocupa medio gigabyte. Diría que esa no es una buena impresión.

Entonces, supongamos que te encuentras en una de esas situaciones y quieres mejorar las cosas para tu aplicación. ¿Cómo lo haces? Bueno, el enfoque que suelo seguir se basa en tres puntos. El primero es que necesitas identificar qué es lo que está ocupando tanta memoria en tu aplicación. Y luego, una vez que has encontrado lo que está ocupando demasiada RAM, puedes usar algunas estrategias para optimizarlo. Y por último, quieres intentar evitar que esas cosas vuelvan a suceder en el futuro. Y puedes usar pruebas de memoria automatizadas en tu pipeline de CI para esto. En esta masterclass, nos centraremos solo en el primer punto, ya que los otros dos puntos también son muy grandes y dependen de la implementación.

Cuando se trata de analizar el uso de memoria, creo que es útil introducir algunos términos y hacer algunas distinciones primero. La primera es sobre el uso de memoria transitoria versus estática. Llamamos uso de memoria estática al conjunto de asignaciones de memoria que permanecen algo estables durante la ejecución de la aplicación, y es la que esperarías encontrar al tomar una instantánea del heap cuando tu aplicación está en estado estable. El uso de memoria transitoria, en cambio, es cuando tu aplicación asigna mucha memoria de una vez y la libera poco después, creando un pico en el uso de memoria. Esto podría ser muy difícil de detectar solo con una instantánea del heap, y un pico muy grande podría hacer que tu aplicación se bloquee.

Otra distinción importante es conteo versus tamaño. Puedes tener unidades individuales de asignación que ocupan mucha memoria. Pero también puedes tener muchas asignaciones más pequeñas, que por sí solas son lo suficientemente pequeñas. Pero juntas llenan tu RAM. En el segundo caso, puede ser más difícil encontrarlas y optimizarlas. Luego tenemos dos términos que aparecen a menudo en los perfiles de memoria, que son memoria superficial y retenida. Como JavaScript se basa en el uso de estructuras de data anidadas y punteros, hay una distinción entre el tamaño de un objeto en sí versus el tamaño al que ese objeto apunta. Por ejemplo, podemos tener un array de 10 elementos, cada uno siendo una cadena diferente con un millón de caracteres cada uno. Debido a su tamaño, las cadenas ocuparán en total alrededor de 10 megabytes, mientras que el array solo ocupará unas pocas docenas de bytes. Dado que el array está conteniendo y reteniendo esas cadenas, diremos que el tamaño retenido de ese array sería de 10 megabytes de todos modos, ya que es la razón por la que la cadena se ha mantenido en memoria de todos modos.

Lo último que creo que es importante introducir son los diferentes tipos de asignación dentro de la Máquina Visual de JavaScript. Chrome, por ejemplo, hace la distinción entre objetos, arrays, cadenas, arrays tipados, y también es importante notar cómo incluso tu código JS ocupa espacio en memoria. Y al navegar por los resultados de una instantánea de memoria, puedes aprender algunas cosas muy interesantes, como el hecho de que la función JS por sí sola puede ocupar espacio como si fueran objetos, ya que necesitan llevar un registro de sus cierres. Por lo tanto, es mejor evitar crear funciones en bucles por esta razón.

Bien, ahora que hemos establecido algunos términos, veamos las herramientas que están disponibles para analizar el uso de memoria.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Una Guía del Comportamiento de Renderizado de React
React Advanced Conference 2022React Advanced Conference 2022
25 min
Una Guía del Comportamiento de Renderizado de React
Top Content
This transcription provides a brief guide to React rendering behavior. It explains the process of rendering, comparing new and old elements, and the importance of pure rendering without side effects. It also covers topics such as batching and double rendering, optimizing rendering and using context and Redux in React. Overall, it offers valuable insights for developers looking to understand and optimize React rendering.
Acelerando tu aplicación React con menos JavaScript
React Summit 2023React Summit 2023
32 min
Acelerando tu aplicación React con menos JavaScript
Top Content
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.
Concurrencia en React, Explicada
React Summit 2023React Summit 2023
23 min
Concurrencia en React, Explicada
Top Content
React 18's concurrent rendering, specifically the useTransition hook, optimizes app performance by allowing non-urgent updates to be processed without freezing the UI. However, there are drawbacks such as longer processing time for non-urgent updates and increased CPU usage. The useTransition hook works similarly to throttling or bouncing, making it useful for addressing performance issues caused by multiple small components. Libraries like React Query may require the use of alternative APIs to handle urgent and non-urgent updates effectively.
El Futuro de las Herramientas de Rendimiento
JSNation 2022JSNation 2022
21 min
El Futuro de las Herramientas de Rendimiento
Top Content
Today's Talk discusses the future of performance tooling, focusing on user-centric, actionable, and contextual approaches. The introduction highlights Adi Osmani's expertise in performance tools and his passion for DevTools features. The Talk explores the integration of user flows into DevTools and Lighthouse, enabling performance measurement and optimization. It also showcases the import/export feature for user flows and the collaboration potential with Lighthouse. The Talk further delves into the use of flows with other tools like web page test and Cypress, offering cross-browser testing capabilities. The actionable aspect emphasizes the importance of metrics like Interaction to Next Paint and Total Blocking Time, as well as the improvements in Lighthouse and performance debugging tools. Lastly, the Talk emphasizes the iterative nature of performance improvement and the user-centric, actionable, and contextual future of performance tooling.
Optimización de juegos HTML5: 10 años de aprendizaje
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Optimización de juegos HTML5: 10 años de aprendizaje
Top Content
PlayCanvas is an open-source game engine used by game developers worldwide. Optimization is crucial for HTML5 games, focusing on load times and frame rate. Texture and mesh optimization can significantly reduce download sizes. GLTF and GLB formats offer smaller file sizes and faster parsing times. Compressing game resources and using efficient file formats can improve load times. Framerate optimization and resolution scaling are important for better performance. Managing draw calls and using batching techniques can optimize performance. Browser DevTools, such as Chrome and Firefox, are useful for debugging and profiling. Detecting device performance and optimizing based on specific devices can improve game performance. Apple is making progress with WebGPU implementation. HTML5 games can be shipped to the App Store using Cordova.
Solucionando Problemas de Rendimiento en React
React Advanced Conference 2023React Advanced Conference 2023
22 min
Solucionando Problemas de Rendimiento en React
Top Content
This Talk discusses various strategies to improve React performance, including lazy loading iframes, analyzing and optimizing bundles, fixing barrel exports and tree shaking, removing dead code, and caching expensive computations. The speaker shares their experience in identifying and addressing performance issues in a real-world application. They also highlight the importance of regularly auditing webpack and bundle analyzers, using tools like Knip to find unused code, and contributing improvements to open source libraries.

Workshops on related topic

Masterclass de Depuración de Rendimiento de React
React Summit 2023React Summit 2023
170 min
Masterclass de Depuración de Rendimiento de React
Top Content
Featured WorkshopFree
Ivan Akulov
Ivan Akulov
Los primeros intentos de Ivan en la depuración de rendimiento fueron caóticos. Vería una interacción lenta, intentaría una optimización aleatoria, vería que no ayudaba, y seguiría intentando otras optimizaciones hasta que encontraba la correcta (o se rendía).
En aquel entonces, Ivan no sabía cómo usar bien las herramientas de rendimiento. Haría una grabación en Chrome DevTools o React Profiler, la examinaría, intentaría hacer clic en cosas aleatorias, y luego la cerraría frustrado unos minutos después. Ahora, Ivan sabe exactamente dónde y qué buscar. Y en esta masterclass, Ivan te enseñará eso también.
Así es como va a funcionar. Tomaremos una aplicación lenta → la depuraremos (usando herramientas como Chrome DevTools, React Profiler, y why-did-you-render) → identificaremos el cuello de botella → y luego repetiremos, varias veces más. No hablaremos de las soluciones (en el 90% de los casos, es simplemente el viejo y regular useMemo() o memo()). Pero hablaremos de todo lo que viene antes - y aprenderemos a analizar cualquier problema de rendimiento de React, paso a paso.
(Nota: Esta masterclass es más adecuada para ingenieros que ya están familiarizados con cómo funcionan useMemo() y memo() - pero quieren mejorar en el uso de las herramientas de rendimiento alrededor de React. Además, estaremos cubriendo el rendimiento de la interacción, no la velocidad de carga, por lo que no escucharás una palabra sobre Lighthouse 🤐)
Construyendo aplicaciones web que iluminan Internet con QwikCity
JSNation 2023JSNation 2023
170 min
Construyendo aplicaciones web que iluminan Internet con QwikCity
Featured WorkshopFree
Miško Hevery
Miško Hevery
Construir aplicaciones web instantáneas a gran escala ha sido elusivo. Los sitios del mundo real necesitan seguimiento, análisis y interfaces y interacciones de usuario complejas. Siempre comenzamos con las mejores intenciones pero terminamos con un sitio menos que ideal.
QwikCity es un nuevo meta-framework que te permite construir aplicaciones a gran escala con un rendimiento de inicio constante. Veremos cómo construir una aplicación QwikCity y qué la hace única. El masterclass te mostrará cómo configurar un proyecto QwikCity. Cómo funciona el enrutamiento con el diseño. La aplicación de demostración obtendrá datos y los presentará al usuario en un formulario editable. Y finalmente, cómo se puede utilizar la autenticación. Todas las partes básicas para cualquier aplicación a gran escala.
En el camino, también veremos qué hace que Qwik sea único y cómo la capacidad de reanudación permite un rendimiento de inicio constante sin importar la complejidad de la aplicación.
Next.js 13: Estrategias de Obtención de Datos
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Estrategias de Obtención de Datos
Top Content
WorkshopFree
Alice De Mauro
Alice De Mauro
- Introducción- Prerrequisitos para la masterclass- Estrategias de obtención: fundamentos- Estrategias de obtención – práctica: API de obtención, caché (estática VS dinámica), revalidar, suspense (obtención de datos en paralelo)- Prueba tu construcción y sírvela en Vercel- Futuro: Componentes de servidor VS Componentes de cliente- Huevo de pascua de la masterclass (no relacionado con el tema, destacando la accesibilidad)- Conclusión
Depuración del Rendimiento de React
React Advanced Conference 2023React Advanced Conference 2023
148 min
Depuración del Rendimiento de React
Workshop
Ivan Akulov
Ivan Akulov
Los primeros intentos de Ivan en la depuración de rendimiento fueron caóticos. Veía una interacción lenta, probaba una optimización aleatoria, veía que no ayudaba, y seguía probando otras optimizaciones hasta que encontraba la correcta (o se rendía).
En aquel entonces, Ivan no sabía cómo usar bien las herramientas de rendimiento. Hacía una grabación en Chrome DevTools o React Profiler, la examinaba, intentaba hacer clic en cosas al azar, y luego la cerraba frustrado unos minutos después. Ahora, Ivan sabe exactamente dónde y qué buscar. Y en esta masterclass, Ivan te enseñará eso también.
Así es como va a funcionar. Tomaremos una aplicación lenta → la depuraremos (usando herramientas como Chrome DevTools, React Profiler, y why-did-you-render) → identificaremos el cuello de botella → y luego repetiremos, varias veces más. No hablaremos de las soluciones (en el 90% de los casos, es simplemente el viejo y regular useMemo() o memo()). Pero hablaremos de todo lo que viene antes - y aprenderemos cómo analizar cualquier problema de rendimiento de React, paso a paso.
(Nota: Esta masterclass es más adecuada para ingenieros que ya están familiarizados con cómo funcionan useMemo() y memo() - pero quieren mejorar en el uso de las herramientas de rendimiento alrededor de React. Además, cubriremos el rendimiento de interacción, no la velocidad de carga, por lo que no escucharás una palabra sobre Lighthouse 🤐)
Masterclass de alto rendimiento Next.js
React Summit 2022React Summit 2022
50 min
Masterclass de alto rendimiento Next.js
Workshop
Michele Riva
Michele Riva
Next.js es un marco convincente que facilita muchas tareas al proporcionar muchas soluciones listas para usar. Pero tan pronto como nuestra aplicación necesita escalar, es esencial mantener un alto rendimiento sin comprometer el mantenimiento y los costos del servidor. En este masterclass, veremos cómo analizar el rendimiento de Next.js, el uso de recursos, cómo escalarlo y cómo tomar las decisiones correctas al escribir la arquitectura de la aplicación.
Maximizar el rendimiento de la aplicación optimizando las fuentes web
Vue.js London 2023Vue.js London 2023
49 min
Maximizar el rendimiento de la aplicación optimizando las fuentes web
WorkshopFree
Lazar Nikolov
Lazar Nikolov
Acabas de llegar a una página web y tratas de hacer clic en un elemento en particular, pero justo antes de hacerlo, se carga un anuncio encima y terminas haciendo clic en eso en su lugar.
Eso... eso es un cambio de diseño. Todos, tanto los desarrolladores como los usuarios, saben que los cambios de diseño son malos. Y cuanto más tarde ocurran, más interrupciones causarán a los usuarios. En este masterclass vamos a analizar cómo las fuentes web causan cambios de diseño y explorar algunas estrategias para cargar fuentes web sin causar grandes cambios de diseño.
Tabla de contenidos:¿Qué es CLS y cómo se calcula?¿Cómo las fuentes pueden causar CLS?Estrategias de carga de fuentes para minimizar CLSRecapitulación y conclusión