Perfilado con la pestaña Performance de Vue DevTools

Antes de optimizar, debe saber dónde se emplea el tiempo. Vue DevTools incluye una vista de rendimiento o línea de tiempo que registra los renderizados de los componentes, para que pueda encontrar trabajo innecesario en lugar de hacer suposiciones.

Instale la extensión del navegador o ejecute la aplicación independiente. En los proyectos de Vite, el plugin vite-plugin-vue-devtools añade un inspector dentro de la aplicación.

Abra la pestaña de línea de tiempo o rendimiento de DevTools y pulse el botón de grabación; después, interactúe con la aplicación. Detenga la grabación para capturar la actividad de renderizado de ese intervalo.

Cada renderizado de componente aparece como un evento en la línea de tiempo. Puede ver cuándo se volvió a renderizar un componente y cuánto tardó su renderizado.

Un commit es una aplicación de actualizaciones al DOM. El gráfico de commits muestra cada commit y qué componentes se renderizaron en él, lo que permite detectar commits que afectan a muchos más componentes de los esperados.

El gráfico de llama apila las duraciones de renderizado de los componentes principales y secundarios. Las barras anchas representan renderizados lentos; las pilas profundas muestran cómo el renderizado se propaga por el árbol.

Un renderizado innecesario ocurre cuando un componente se vuelve a renderizar pero produce la misma salida. Estos casos aparecen como eventos de renderizado repetidos cuyo resultado no cambió el DOM.

Una causa habitual es pasar como prop un objeto recién creado o una función flecha inline en cada renderizado, lo que rompe la memoización. El componente hijo vuelve a renderizarse aunque su resultado visible sea idéntico.

Eleve las constantes fuera del componente o envuelva los datos derivados en computed para pasar la misma referencia en los distintos renderizados.

La línea de tiempo también registra eventos del ratón y del teclado. Alinee un commit lento con la interacción que lo desencadenó para encontrar la ruta exacta del código que debe optimizarse.

El inspector de componentes puede resaltar los componentes a medida que se actualizan. Observar cómo un contador parpadea con cada cambio de estado no relacionado revela el exceso de renderizados de un vistazo.

¿Qué representa el gráfico de commits de la pestaña de rendimiento?

Utilice la pestaña de rendimiento/línea de tiempo de Vue DevTools para registrar los renderizados. El gráfico de commits muestra cada vaciado del DOM y los componentes renderizados, mientras que el gráfico de llamas revela los renderizados lentos. Busque renderizados innecesarios: componentes que vuelven a renderizarse sin cambiar su resultado, a menudo por referencias inestables en las props, y corríjalos mediante constantes elevadas o computed.