Masterclass de Depuración de Rendimiento de React

Rate this content
Bookmark
Github

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 🤐)

This workshop has been presented at React Summit 2023, check out the latest edition of this React Conference.

FAQ

Es una clase intensiva diseñada para enseñar a los desarrolladores cómo abordar y mejorar problemas de rendimiento en aplicaciones React.

Herramientas como React DevTools, Why Did You Render, UseWhyDidYouUpdate, MemLab, y las APIs de console.time son comúnmente utilizadas para analizar y mejorar el rendimiento de las aplicaciones React.

'Why Did You Render' es una herramienta que ayuda a identificar componentes de React que se vuelven a renderizar innecesariamente, permitiendo a los desarrolladores optimizar el rendimiento al reducir renderizados costosos.

Una estrategia efectiva es utilizar Reselect para crear selectores memorizados que pueden prevenir re-renderizaciones innecesarias y mejorar el rendimiento al evitar cálculos costosos.

El uso de herramientas como MemLab, combinado con personalizaciones como reporteros personalizados, puede facilitar la identificación y resolución de fugas de memoria y otros problemas relacionados en aplicaciones React.

Ivan Akulov
Ivan Akulov
170 min
19 Jun, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Esta Masterclass sobre Rendimiento de React cubre varias técnicas y herramientas para analizar y optimizar el rendimiento de la aplicación. Incluye el uso de los paneles de Rendimiento y Profiler de Chrome DevTools, el análisis de la actividad de la CPU y las llamadas a funciones, la identificación de renders y componentes costosos, la depuración con 'why did you render', y la optimización del código y efectos de React. La masterclass también discute el uso de la API ConsoleTime para el perfilado, la optimización del gestor de estado, y el análisis del rendimiento de la memoria. En general, proporciona valiosos conocimientos para mejorar el rendimiento de las aplicaciones de React.

1. Introducción a la Masterclass de Rendimiento de React

Short description:

Bienvenidos a la Masterclass de Rendimiento de React. Hoy hablaremos sobre cómo abordar los problemas de rendimiento de React y analizar una aplicación lenta. Utilizaremos el panel de rendimiento de Chrome DevTools para grabar y analizar el rendimiento de la aplicación. Comenzaremos mirando la fila de CPU para identificar dónde la aplicación es lenta. Luego, ampliaremos una grabación para analizar el panel principal durante los picos de CPU.

♪♪ Bienvenidos a la React Performance Masterclass para la Cumbre de React. Estoy muy contento de conocerlos a todos y de haber hablado ya con algunos de ustedes. Soy Ivan, un experto en DevOps de Google. Soy un ingeniero de rendimiento web. He estado trabajando en rendimiento durante cinco años en este punto. He trabajado con empresas como Google, CNBC, Framer, etc. Y hoy vamos a hablar sobre las formas de abordar los problemas de rendimiento de react cuando tu aplicación es lenta y necesitas averiguar por qué. Pero no estás realmente seguro de cuáles son los próximos pasos a seguir. Que era básicamente yo al principio de mi carrera.

Y para empezar... Oh sí. Cosas de trabajo. Entonces, la masterclass dura tres horas, ¿verdad? Tendremos descansos de 10 minutos cada hora. Tenemos tiempo para preguntas y respuestas al final. Si tienes alguna pregunta en el proceso, no dudes en... En realidad, lo siento, creo que esta reunión es un poco grande para que Ani pregunte. Así que sí, no viste eso. Si tienes alguna pregunta, no dudes en hacerla en los chats o guárdala para las preguntas y respuestas al final. Y también, en caso de que seas la persona a la que le gusta tomar notas, hay un enlace, bit.ly dash Ares para notas, que, si vas a ese enlace, verás este documento llamado React Performance Masterclass, Notas Colaborativas. Y aquí encontrarás el enlace a este documento, al rep de Google o al chat de Discord, donde dejaré los enlaces después de esta masterclass. Y también, si tomas alguna nota o si tienes alguna pregunta que quieras hacer más tarde pero no quieres olvidar, no dudes en guardarlas en las notas aquí para que todos puedan colaborar en las notas y todos se beneficien.

Y para empezar, vamos a mirar una aplicación lenta de inmediato. Así que si abres este repositorio y si clonas este repositorio, que ya he clonado, y abres el directorio de notas, e instalas las dependencias y luego ejecutas yarnstart, obtendrás esta básica nota tomada. Tú, como, si asististe... Si asististe a la charla que estaba dando sobre el tiempo de rect, es sobre la concurrency de rect. Podrías haber visto esto, que no es una coincidencia, pero no vamos a hablar sobre la concurrency de rect hoy, vamos a hablar sobre otros problemas. Y esta aplicación tiene un desafío de rendimiento. Específicamente, si creas unos pocos... Oops, perdón, cambia entre esto. Si creas unas pocas cientos de nodos, como 500, 600, 700, y luego abres cualquiera de estos nodos, y luego intentas escribir en el editor, la aplicación se sentirá bastante lenta, bastante lenta. Así que aquí estoy escribiendo en el editor de la aplicación, y la aplicación se siente lenta. Ahora realmente no puedes ver eso, ¿verdad, porque es mi portátil, soy yo escribiendo, soy yo sintiendo esto. Realmente no puedes notar que es lento. Así que una cosa que voy a hacer para que veas cuando la aplicación es lenta es que voy a ir a DevTools, Más Herramientas, Renderizado, y voy a hacer clic en la casilla de Estadísticas de Renderizado de Cuadros. Así que cuando hago clic en la casilla de Estadísticas de Renderizado de Cuadros, obtengo en la esquina superior izquierda esta cosa, que básicamente me muestra cuando el Hilo Principal está ocupado o inactivo. Así que ahora, si hago algo rápido, como desplazar esta lista, puedo ver que mi tasa de cuadros por segundo se mantiene alta, y aparecen algunas líneas rojas y amarillas, lo que significa que el Hilo Principal estuvo ocupado con algún trabajo durante un período de tiempo muy corto. Pero si intento escribir en el editor, podrías ver cómo la tasa de cuadros por segundo cae inmediatamente con cada pulsación de tecla. Y puedes ver cómo el Hilo Principal comienza a llenarse de rojos. Lo que básicamente significa que el Hilo Principal está bloqueado. Así que incluso si sólo escribo una sola letra, puedes ver el Hilo Principal bloqueado durante algún período de tiempo prolongado. O si simplemente escribo varias letras a la vez, acabo de escribir un montón de letras y la aplicación estaba tan ocupada, que ni siquiera actualizó las tasas de cuadros. ¿Gráfico, es esto un gráfico? ¿Quizás esto es un gráfico? Pero de todos modos, tenemos un problema de rendimiento. Estoy escribiendo en el editor y la aplicación es lenta. Ahora, cada vez que tengo un problema de rendimiento, lo primero que siempre hago es ir a ChromDevTools, abro el panel de Performance, e intento grabar lo que está pasando en la aplicación durante este problema de rendimiento usando el panel de Performance. Así que lo que voy a hacer ahora es abrir el panel de Performance, que ya tengo abierto, voy a hacer clic en Grabar, voy a escribir en el editor, pero no un montón de letras a la vez, como acabo de hacer. Porque eso va a disparar un montón de JavaScript, supuestamente o lo que sea, lo que sea que esté ralentizando la aplicación. Pero sólo una letra y luego esperar un poco, otra letra y luego esperar un poco de nuevo, y otra letra, y luego detener la grabación. Y una vez que hago esto, obtendría esta grabación de rendimiento que me mostrará todo lo que ha estado pasando en la aplicación durante la grabación, mientras estaba escribiendo en estos botones del teclado. Así que si ves esto por primera vez, esto podría ser un poco abrumador, porque hay muchas cosas pasando aquí. Pero las únicas dos áreas reales en las que necesitamos centrarnos son la fila de CPU, que muestra cuando la aplicación, cuando el hilo principal estaba ocupado, y el panel principal, que muestra qué estaba pasando exactamente en la aplicación cuando la aplicación estaba ocupada. Así que ahora lo primero que voy a mirar, acabo de grabar, acabo de hacer una grabación de rendimiento, ¿verdad? Así que lo primero que voy a mirar para tratar de averiguar qué está pasando en la aplicación es que voy a mirar la fila de CPU, y voy a tratar de averiguar qué exactamente, o averiguar dónde exactamente la aplicación es lenta. Y puedo ver, como, esto es bastante fácil de ver, ¿verdad? Cuando la fila de CPU está vacía, eso significa que la aplicación estaba inactiva. Cuando la fila de CPU está llena de algún color, como el amarillo en este caso, para JavaScript, esto significa que la CPU estaba ocupada ejecutando algún código. Así que en este caso, veo tres picos de actividad de la CPU, que, supongo, corresponde a mí escribiendo en el editor. Así que lo que voy a hacer a continuación es, voy a ampliar una de las grabaciones y cambiar al panel principal e intentar averiguar qué está pasando exactamente en el panel principal durante el pico de actividad de la CPU. Y así que echemos un vistazo. Así que tenemos un pico de actividad de la CPU. El pico de actividad de la CPU tomó 215 milisegundos. En el pico de actividad de la CPU, tenemos dos rectángulos que indican lo que ha estado pasando en el nivel más alto. Así que tuvimos una tarea, una sola tarea, que significa un solo período de tiempo ininterrumpido cuando el navegador estaba procesando algo. Esta tarea tomó 200, lo siento, 215 milisegundos. Y durante esta tarea, obtenemos dos eventos. Uno, el evento de tecla hacia abajo, que tomó sólo tres milisegundos para manejar. Y otro, el evento de presión de tecla que tomó 212 milisegundos para manejar. Así que el primero probablemente no es muy importante porque es, así que en primer lugar, mira hasta ahora. Hasta ahora todo bien, ¿verdad? Esto coincide con lo que obtengo en la aplicación. Escribí en el editor, obtuvimos el evento de presión de tecla, el evento de tecla hacia abajo.

2. Análisis del Evento de Pulsación de Tecla y Llamadas a Funciones

Short description:

El evento de pulsación de tecla es el más costoso. Desencadena el evento de entrada de texto, que a su vez desencadena el evento de entrada. Estos eventos conducen a múltiples llamadas a funciones, principalmente de desarrollo de Ragdoll y del núcleo de React.

Entonces, el evento de pulsación de tecla es barato. Voy a ignorarlo por ahora, pero me voy a centrar en el evento de pulsación de tecla, que es, lo siento, el evento de tecla hacia abajo es barato. Me voy a centrar en el evento de pulsación de tecla, que es el más costoso. Así que se disparó el evento de pulsación de tecla. El evento de pulsación de tecla a su vez desencadenó el evento de entrada de texto. El evento de entrada de texto a su vez desencadenó el evento de entrada. El evento de entrada desencadenó alguna llamada a función, que parece ser en su mayoría esta función textAreaInputPol, que es algo, no voy a profundizar en eso ahora. Solo estoy echando un vistazo de alto nivel. Y luego el rectángulo runMicroDosks, que tomó 209 milisegundos, así que todavía la mayor parte del tiempo. Así que runMicroTasks desencadenó otra llamada a función, que en este caso parece venir del desarrollo de Ragdoll. Y esa llamada a función desencadenó otra llamada a función, y esa llamada a función desencadenó otra llamada a función, y luego esa llamada a función desencadenó otra llamada a función. Y lo que veo aquí es un montón de eventos de entrada de texto llamadas a funciones que vienen del desarrollo de Ragdoll, que vienen del núcleo de React.

QnA

Watch more workshops on topic

Aventuras de Renderizado Concurrente en React 18
React Advanced 2021React Advanced 2021
132 min
Aventuras de Renderizado Concurrente en React 18
Top Content
Featured WorkshopFree
Maurice de Beijer
Maurice de Beijer
Con el lanzamiento de React 18 finalmente obtenemos el tan esperado renderizado concurrente. Pero, ¿cómo va a afectar eso a tu aplicación? ¿Cuáles son los beneficios del renderizado concurrente en React? ¿Qué necesitas hacer para cambiar al renderizado concurrente cuando actualices a React 18? ¿Y qué pasa si no quieres o no puedes usar el renderizado concurrente todavía?

¡Hay algunos cambios de comportamiento de los que debes estar al tanto! En esta masterclass cubriremos todos esos temas y más.

Acompáñame con tu portátil en esta masterclass interactiva. Verás lo fácil que es cambiar al renderizado concurrente en tu aplicación React. Aprenderás todo sobre el renderizado concurrente, SuspenseList, la API startTransition y más.
Consejos sobre React Hooks que solo los profesionales conocen
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
Consejos sobre React Hooks que solo los profesionales conocen
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
La adición de la API de hooks a React fue un cambio bastante importante. Antes de los hooks, la mayoría de los componentos tenían que ser basados en clases. Ahora, con los hooks, estos son a menudo componentes funcionales mucho más simples. Los hooks pueden ser realmente simples de usar. Casi engañosamente simples. Porque todavía hay muchas formas en las que puedes equivocarte con los hooks. Y a menudo resulta que hay muchas formas en las que puedes mejorar tus componentes con una mejor comprensión de cómo se puede usar cada hook de React.Aprenderás todo sobre los pros y los contras de los diversos hooks. Aprenderás cuándo usar useState() versus useReducer(). Veremos cómo usar useContext() de manera eficiente. Verás cuándo usar useLayoutEffect() y cuándo useEffect() es mejor.
React, TypeScript y TDD
React Advanced 2021React Advanced 2021
174 min
React, TypeScript y TDD
Top Content
Featured WorkshopFree
Paul Everitt
Paul Everitt
ReactJS es extremadamente popular y, por lo tanto, ampliamente soportado. TypeScript está ganando popularidad y, por lo tanto, cada vez más soportado.

¿Los dos juntos? No tanto. Dado que ambos cambian rápidamente, es difícil encontrar materiales de aprendizaje precisos.

¿React+TypeScript, con los IDEs de JetBrains? Esa combinación de tres partes es el tema de esta serie. Mostraremos un poco sobre mucho. Es decir, los pasos clave para ser productivo, en el IDE, para proyectos de React utilizando TypeScript. En el camino, mostraremos el desarrollo guiado por pruebas y enfatizaremos consejos y trucos en el IDE.
Masterclass Web3 - Construyendo Tu Primer Dapp
React Advanced 2021React Advanced 2021
145 min
Masterclass Web3 - Construyendo Tu Primer Dapp
Top Content
Featured WorkshopFree
Nader Dabit
Nader Dabit
En esta masterclass, aprenderás cómo construir tu primer dapp de pila completa en la blockchain de Ethereum, leyendo y escribiendo datos en la red, y conectando una aplicación de front end al contrato que has desplegado. Al final de la masterclass, entenderás cómo configurar un entorno de desarrollo de pila completa, ejecutar un nodo local e interactuar con cualquier contrato inteligente usando React, HardHat y Ethers.js.
Diseñando Pruebas Efectivas con la Biblioteca de Pruebas de React
React Summit 2023React Summit 2023
151 min
Diseñando Pruebas Efectivas con la Biblioteca de Pruebas de React
Top Content
Featured Workshop
Josh Justice
Josh Justice
La Biblioteca de Pruebas de React es un gran marco para las pruebas de componentes de React porque responde muchas preguntas por ti, por lo que no necesitas preocuparte por esas preguntas. Pero eso no significa que las pruebas sean fáciles. Todavía hay muchas preguntas que tienes que resolver por ti mismo: ¿Cuántas pruebas de componentes debes escribir vs pruebas de extremo a extremo o pruebas de unidad de nivel inferior? ¿Cómo puedes probar una cierta línea de código que es difícil de probar? ¿Y qué se supone que debes hacer con esa persistente advertencia de act()?
En esta masterclass de tres horas, presentaremos la Biblioteca de Pruebas de React junto con un modelo mental de cómo pensar en el diseño de tus pruebas de componentes. Este modelo mental te ayudará a ver cómo probar cada bit de lógica, si debes o no simular dependencias, y ayudará a mejorar el diseño de tus componentes. Te irás con las herramientas, técnicas y principios que necesitas para implementar pruebas de componentes de bajo costo y alto valor.
Tabla de contenidos- Los diferentes tipos de pruebas de aplicaciones de React, y dónde encajan las pruebas de componentes- Un modelo mental para pensar en las entradas y salidas de los componentes que pruebas- Opciones para seleccionar elementos DOM para verificar e interactuar con ellos- El valor de los mocks y por qué no deben evitarse- Los desafíos con la asincronía en las pruebas de RTL y cómo manejarlos
Requisitos previos- Familiaridad con la construcción de aplicaciones con React- Experiencia básica escribiendo pruebas automatizadas con Jest u otro marco de pruebas unitarias- No necesitas ninguna experiencia con la Biblioteca de Pruebas de React- Configuración de la máquina: Node LTS, Yarn
Mejores Prácticas y Consejos Avanzados de TypeScript para Desarrolladores de React
React Advanced 2022React Advanced 2022
148 min
Mejores Prácticas y Consejos Avanzados de TypeScript para Desarrolladores de React
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
¿Eres un desarrollador de React tratando de obtener los máximos beneficios de TypeScript? Entonces esta es la masterclass para ti.En esta masterclass interactiva, comenzaremos desde lo básico y examinaremos los pros y contras de las diferentes formas en que puedes declarar componentes de React usando TypeScript. Después de eso, pasaremos a conceptos más avanzados donde iremos más allá de la configuración estricta de TypeScript. Aprenderás cuándo usar tipos como any, unknown y never. Exploraremos el uso de predicados de tipo, guardias y comprobación exhaustiva. Aprenderás sobre los tipos mapeados incorporados, así como cómo crear tus propias utilidades de mapa de tipo nuevo. Y comenzaremos a programar en el sistema de tipos de TypeScript usando tipos condicionales e inferencia de tipos.

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 2022React Advanced 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.
Construyendo Mejores Sitios Web con Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Construyendo Mejores Sitios Web con Remix
Top Content
Remix is a web framework built on React Router that focuses on web fundamentals, accessibility, performance, and flexibility. It delivers real HTML and SEO benefits, and allows for automatic updating of meta tags and styles. It provides features like login functionality, session management, and error handling. Remix is a server-rendered framework that can enhance sites with JavaScript but doesn't require it for basic functionality. It aims to create quality HTML-driven documents and is flexible for use with different web technologies and stacks.
No resuelvas problemas, elimínalos
React Advanced 2021React Advanced 2021
39 min
No resuelvas problemas, elimínalos
Top Content
Kent C. Dodds discusses the concept of problem elimination rather than just problem-solving. He introduces the idea of a problem tree and the importance of avoiding creating solutions prematurely. Kent uses examples like Tesla's electric engine and Remix framework to illustrate the benefits of problem elimination. He emphasizes the value of trade-offs and taking the easier path, as well as the need to constantly re-evaluate and change approaches to eliminate problems.
Compilador React Forget - Entendiendo React Idiomático
React Advanced 2023React Advanced 2023
33 min
Compilador React Forget - Entendiendo React Idiomático
Top Content
Joe Savona
Mofei Zhang
2 authors
The Talk discusses React Forget, a compiler built at Meta that aims to optimize client-side React development. It explores the use of memoization to improve performance and the vision of Forget to automatically determine dependencies at build time. Forget is named with an F-word pun and has the potential to optimize server builds and enable dead code elimination. The team plans to make Forget open-source and is focused on ensuring its quality before release.
Uso efectivo de useEffect
React Advanced 2022React Advanced 2022
30 min
Uso efectivo de useEffect
Top Content
Today's Talk explores the use of the useEffect hook in React development, covering topics such as fetching data, handling race conditions and cleanup, and optimizing performance. It also discusses the correct use of useEffect in React 18, the distinction between Activity Effects and Action Effects, and the potential misuse of useEffect. The Talk highlights the benefits of using useQuery or SWR for data fetching, the problems with using useEffect for initializing global singletons, and the use of state machines for handling effects. The speaker also recommends exploring the beta React docs and using tools like the stately.ai editor for visualizing state machines.
Depuración Web Moderna
JSNation 2023JSNation 2023
29 min
Depuración Web Moderna
Top Content
This Talk discusses modern web debugging and the latest updates in Chrome DevTools. It highlights new features that help pinpoint issues quicker, improved file visibility and source mapping, and ignoring and configuring files. The Breakpoints panel in DevTools has been redesigned for easier access and management. The Talk also covers the challenges of debugging with source maps and the efforts to standardize the source map format. Lastly, it provides tips for improving productivity with DevTools and emphasizes the importance of reporting bugs and using source maps for debugging production code.