¿Qué optimizaciones aplicarías primero en una pantalla Vue con renders caros y cómo medirías el impacto?

Respuesta

• Empieza midiendo con Vue DevTools, performance marks o trazas simples para ver si el coste está en render, fetch o cálculos derivados.
• Después revisa listas, watchers, recomputaciones y objetos nuevos por render, porque suelen ser una fuente frecuente de trabajo extra.
• Optimiza primero lo barato y visible: dividir subárboles pesados, corregir derivaciones y evitar renderizar lo que el usuario no ve.

Puntos clave

• En Vue las mejoras de rendimiento más rentables suelen venir de quitar trabajo: menos renderizados, menos datos, menos bundle o menos efectos activos.
• Antes de optimizar hay que observar si el coste real está en render, red, serialización, hidratación o memoria; no todas las lentitudes se arreglan igual.
• Las técnicas como keep-alive, listas virtuales o componentes asíncronos ayudan cuando el cuello de botella es real; aplicarlas por costumbre añade complejidad.

Errores comunes

• Optimizar sin medir suele desplazar complejidad hacia el código sin tocar el cuello de botella real.
• Conservar o memorizar componentes por costumbre puede costar más que volver a renderizarlos.

Ejemplo de código

performance.mark("orders-render-start");
await nextTick();
performance.mark("orders-render-end");
performance.measure("orders-render", "orders-render-start", "orders-render-end");

const entries = performance.getEntriesByName("orders-render");
console.table(entries.map((entry) => ({ duration: entry.duration })));

Ejemplo o caso real

Suele aparecer en vistas con tablas, paneles laterales, gráficos o rutas pesadas donde el usuario percibe lentitud aunque el problema técnico real no esté donde parecía.

Idea clave

Rendimiento no es acumular técnicas; es quitar trabajo innecesario donde realmente duele.