Depuración de Rendimiento Con AI

Trabajo para AG Grid, pero no voy a hablar sobre la cuadrícula hoy. Voy a hablar sobre un agujero de conejo en el que desaparecí durante varios meses. Depurar el rendimiento de renderizado es realmente difícil, y quería intentar averiguar cómo hacer que la IA lo haga por mí. Y he estado tratando de pensar en qué cubrir, porque es solo una charla de siete minutos aquí, y lo que creo que tengo tiempo para, no voy a poder guiarte a través de todo el proceso, pero quiero inspirarte con algunas cosas que quizás no te hayas dado cuenta que eran posibles, de maneras en que puedes hacer que la IA aborde este problema realmente difícil por ti. Entonces, en primer lugar, ¿por qué es realmente difícil depurar el rendimiento de renderizado?

Básicamente, es difícil de depurar porque la información que obtenemos de las herramientas no es muy buena. Entonces, si grabas un perfil de rendimiento en Chrome aquí, haces clic en ese pequeño botón, interactúas con tu aplicación, y lo detienes, y obtendrás esto llamado un gráfico de llamas de rendimiento. Y lo que quiero mostrarte en esto, así que primero, hay un pequeño video en la parte superior que te muestra tu interacción. Puedes elegir una parte que te interese, hacer zoom en ella, y lo que quiero mostrarte es cuán buena es la información que estás obteniendo de la sección de JavaScript. Te muestra cada función en tu aplicación, exactamente cuánto tiempo se ha pasado, y esta es la razón por la que los frameworks son tan rápidos.

Tienes esta información increíble para optimizar ese rendimiento. Cuando intentas que tu rendimiento de renderizado sea rápido, no obtienes nada de eso. Solo te dice cuánto tiempo pasaste en cada sección de la aplicación. Y entonces, lo que hemos tenido que hacer históricamente, si queremos que nuestras aplicaciones se rendericen rápido, es básicamente hacer ciencia en nuestras aplicaciones. Entonces, primero, necesitas aprender tanto como puedas sobre el proceso de renderizado en CSS. Luego, básicamente, formulas hipótesis, como razones por las que crees que tu aplicación podría ser lenta, y las pruebas editando tu aplicación y grabando otro perfil de rendimiento y observando las diferencias, y básicamente es hacer ciencia. Es meticuloso, es repetitivo, consume tiempo, y puede ser realmente aburrido.

Entonces, hay un Chrome developer tools MCP, que si instalas, puede hacer cualquier cosa que puedas hacer en esa interfaz de usuario. Puede navegar por tu página, grabar trazas de rendimiento y analizarlas. Y lo más importante que la IA puede hacer es aplanar la curva de aprendizaje. Antes necesitabas ser un experto para obtener resultados. Ahora básicamente puedes comenzar a hacer esto y hacer que la IA te guíe a través del proceso y aprender mientras avanzas. Así que si solo hay dos cosas que te llevas de esto, quiero que sean estas dos cosas. Primero que todo, para que todo esto funcione, tienes que instalar el Chrome developer tools MCP. Sin eso, Claude no sabe lo que no sabe. No te recomendará que hagas esto, simplemente será ignorante. Así que necesitas hacerlo tú mismo. Y luego mi gran sugerencia es, pregunta a la IA cuáles son tus opciones. No digas arregla este problema de rendimiento, ni siquiera digas por qué es lento, di explícame mis opciones. Y así es como te conviertes en un experto. Y así es como aprendes y construyes una caja de herramientas de técnicas.

Así que ahora te voy a mostrar algunas de estas técnicas. Nuevamente, solo vamos a repasarlas bastante rápido. Pero la idea es mostrarte lo que es posible y solo recuerda que cualquier cosa aquí, puedes hacer que la IA te lo explique y luego hacerlo la próxima semana. Así que la primera es una bisección de regresión. Entonces, una regresión es un caso especial de un problema de rendimiento donde tienes una versión de tu aplicación que sabes que es buena y una versión que sabes que es mala. Y puedes encontrar automáticamente exactamente, como puedes pedirle a Claude, encuentra el commit que introdujo este problema y hará algo llamado una bisección de git por ti. Así que si sabes que hace 50 commits, tu aplicación estaba bien, ahora tiene este problema, puedes decir encuentra el commit que lo introdujo y verificará un commit en el medio y lo probará, como en verificará el código fuente, construirá tu aplicación, la abrirá, iniciará el servidor de desarrollo, la abrirá en Chrome, navegará a la página, hará la acción que le dijiste que era lenta, grabará el perfil de rendimiento, descubrirá si es lenta, realmente cosas que consumen tiempo. Y digamos, OK, descubrimos que el commit 25 era bueno, así que repetirá el proceso nuevamente y pasará sistemáticamente por todo tu historial de commits para encontrar el commit exacto. Y me he ido a un almuerzo donde tuve esto haciéndolo durante una hora y volví y es como, oye, este commit, ese es tu problema. Así que otra técnica que uso todo el tiempo es una reproducción independiente. Así que aquí está la página que te mostré antes que grabó una traza de rendimiento. Si estaba interesado en el rendimiento de redimensionamiento de esa cuadrícula, hay un montón de otras cosas allí que son solo ruido que va a contaminar la traza. Así que puedes decirle a Claude, oye, aquí hay una página que me interesa, solo haz una versión independiente de eso que solo tenga la cuadrícula. Y le pedí que hiciera eso y construyó esto. Ahora, si estamos interesados en el rendimiento de redimensionamiento, puedes hacer este pequeño botón aquí donde tienes un pequeño botón que solo redimensiona la cuadrícula cinco veces. Si grabas una traza de rendimiento mientras haces eso, obtendrás datos realmente limpios.

No hay nada más en la página. Así que nuevamente, una excelente manera de investigar tus problemas de rendimiento. Hay una prueba de estrés sintética, otra técnica que uso todo el tiempo. Así que la idea básica aquí es que si piensas que algo podría ser un pequeño problema, crea un ejemplo loco que lo convierta en un gran problema para que puedas verlo. Así que recibimos informes de que cuantos más elementos había en una página, más tiempo tardaban en cargar nuestros estilos. No podíamos verlo suceder normalmente. Así que simplemente dije, Claude, construye una página que tenga 100,000 divs. Y hay un pequeño botón aquí para mostrar y ocultar los divs y un botón para crear una cuadrícula que va a añadir nuestros estilos a la página. Y usando esto, pudimos reproducir el problema porque es un ejemplo loco con muchos más divs de los que normalmente tendrías. Así que esto es básicamente solo una pequeña visión que estoy tratando de darte sobre el poder de estas herramientas.

La idea es que hay mucho más que puedes hacer. Puedes hacer que Claude revise y comente cada línea en tu CSS una por una hasta encontrar la que está causando un problema. Puedes pedirle que revise tu aplicación proactivamente buscando problemas de rendimiento, ejercitando cada característica. Básicamente, el único límite es tu imaginación. Y lo que quiero comunicarte es, primero que todo, solo necesitas pedirle a la IA que te explique lo que es posible. Tengo esta construcción. Estoy interesado en qué técnicas puedo usar. Y te explicará todo esto. Oh, y también, instala el Chrome MCP. De lo contrario, no sabe lo que está haciendo. Gracias. Gracias.