Identificación y solución de cuellos de botella
Analice el rendimiento y resuelva los cuellos de botella.
Identificación y solución de cuellos de botella es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 3 de 3. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 3 lecciones en total.
Medir antes de optimizar
Adivinar dónde es lenta una aplicación es una pérdida de tiempo. El enfoque profesional consiste en medir primero, encontrar el cuello de botella real, corregirlo y volver a medir. Vue DevTools y el perfilador del navegador son sus herramientas principales.
Vue DevTools
La extensión de navegador Vue DevTools le permite inspeccionar el árbol de componentes, el estado reactivo y los eventos. Su pestaña Performance registra cuánto tardan los componentes en renderizarse para que pueda detectar los más lentos.
Usar la pestaña Performance
Inicie una grabación, interactúe con su aplicación y deténgala después. DevTools muestra una línea de tiempo de los renderizados de los componentes. Los componentes con barras de renderizado largas o frecuentes son los principales sospechosos.
El perfilador del navegador
El panel Performance de las DevTools del navegador registra toda la página: ejecución de scripts, renderizado y pintura. Los bloques amarillos largos de ejecución de scripts suelen indicar un trabajo pesado de JavaScript durante un renderizado.
Detectar renderizados excesivos
Un cuello de botella habitual es que un componente se vuelva a renderizar muchas más veces de lo esperado. Si un cambio pequeño provoca que se vuelva a renderizar un subárbol grande, busque un estado reactivo compartido o la falta de límites entre componentes.
Renderizado de listas grandes
Renderizar miles de nodos DOM a la vez es lento y consume mucha memoria. Si una lista tiene cientos o miles de filas, el propio DOM se convierte en el cuello de botella, no la lógica de los datos.
<!-- rendering 10,000 rows like this is expensive -->
<li v-for="row in tenThousandRows" :key="row.id">{{ row.name }}</li>Concepto de desplazamiento virtual
El desplazamiento virtual renderiza solo las filas visibles en el área de visualización, además de un pequeño búfer, y reutiliza los nodos DOM mientras el usuario se desplaza. Una lista de 10 000 elementos mantiene solo unas pocas docenas de nodos en el DOM.
Usar una biblioteca de listas virtuales
Bibliotecas como vue-virtual-scroller implementan esta técnica por usted. Debe proporcionarles todos los datos y la altura de una fila, y ellas se encargan de la renderización por ventanas.
import { RecycleScroller } from "vue-virtual-scroller"
// in template:
// <RecycleScroller :items="rows" :item-size="40" v-slot="{ item }">
// <div>{{ item.name }}</div>
// </RecycleScroller>Errores de renderizado relacionados con las claves
Usar el índice del array como :key en una lista dinámica puede hacer que Vue reutilice los nodos DOM de forma incorrecta cuando se añaden, eliminan o reordenan elementos, lo que provoca contenido incorrecto y renderizados adicionales.
<!-- buggy: index keys break on reorder -->
<li v-for="(item, i) in items" :key="i">{{ item.name }}</li>Corregir errores de claves
Use un identificador estable y único como clave para que Vue pueda asociar correctamente los elementos con los datos en las actualizaciones.
<!-- correct: stable id key -->
<li v-for="item in items" :key="item.id">{{ item.name }}</li>Un flujo de trabajo práctico
Integre todo el proceso: grabe con DevTools, encuentre el componente más lento, compruebe si hay renderizados excesivos o listas enormes, aplique la solución adecuada (caché de computed, v-memo, desplazamiento virtual o claves estables) y vuelva a medir para confirmar la mejora.
Comprobación rápida
Compruebe sus conocimientos sobre cómo encontrar cuellos de botella.
Resumen
Optimice midiendo primero con Vue DevTools y el perfilador del navegador, y después abordando los cuellos de botella reales: renderizados excesivos, listas enormes (que se corrigen con desplazamiento virtual) y errores causados por claves basadas en índices (que se corrigen con claves estables). Vuelva a medir siempre para confirmar el resultado. A continuación, aprenderá a probar aplicaciones Vue.
Preguntas frecuentes
¿La lección «Identificación y solución de cuellos de botella» es gratis?
Sí — el texto completo de «Identificación y solución de cuellos de botella» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 3 lecciones en total.
¿Qué aprenderé en «Identificación y solución de cuellos de botella»?
Analice el rendimiento y resuelva los cuellos de botella. Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Vue Academy?
No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 3.
¿Cuánto tiempo toma la lección «Identificación y solución de cuellos de botella»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Vue Academy?
Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Carga diferida y división del código
- Técnicas de memoización
- Identificación y solución de cuellos de botella