Optimización de listas y renderizado
Acelerar listas grandes mediante tracking
Optimización de listas y renderizado es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 4 de 4. 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 Angular Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Angular Academy incluye 4 lecciones en total.
Por qué es importante renderizar listas
Las listas son el principal foco de problemas de rendimiento. Volver a renderizar una lista completa en cada cambio desperdicia trabajo y restablece el estado del DOM. Angular le proporciona herramientas para renderizar de forma eficiente.
El bloque @for
El control de flujo integrado @for requiere una expresión track para que Angular pueda identificar cada elemento entre actualizaciones.
@for (item of items(); track item.id) {
<li>{{ item.name }}</li>
}Por qué se requiere track
Sin una identidad estable, Angular no puede saber qué elementos se han movido, añadido o eliminado. track vincula cada nodo renderizado con sus datos, de modo que reutiliza el DOM en lugar de volver a crearlo.
Seguir por identidad
Utilice una clave única y estable, como un id. Evite track $index en listas que cambian de orden, ya que los cambios de índice provocan modificaciones innecesarias en el DOM.
@for (user of users(); track user.id) {
<app-user-card [user]="user" />
}Cuándo conviene usar track $index
Si los elementos no tienen un id único y nunca cambian de orden (por ejemplo, registros a los que solo se añaden elementos), track $index es aceptable.
@for (line of logLines(); track $index) {
<p>{{ line }}</p>
}El trackBy heredado
Con el *ngFor antiguo, proporcione una función trackBy que devuelva una clave estable.
trackById(index: number, item: Item) {
return item.id;
}trackBy en la plantilla
Haga referencia a la función en la microsintaxis de *ngFor.
<li *ngFor="let item of items; trackBy: trackById">
{{ item.name }}
</li>Estados vacío y de carga
@for admite un bloque @empty para cuando la colección está vacía, lo que evita comprobaciones *ngIf adicionales.
@for (item of items(); track item.id) {
<li>{{ item.name }}</li>
} @empty {
<li>No items yet.</li>
}Evitar llamadas a funciones en los enlaces
Las funciones de las plantillas se ejecutan en cada comprobación. Calcule previamente los valores en signals o campos memorizados en lugar de llamar a métodos en los cuerpos de @for.
OnPush + listas inmutables
Combine OnPush con referencias nuevas de arrays en cada cambio. Con un track adecuado, Angular actualiza solo las filas que realmente han cambiado.
this.items.update(list => [...list, newItem]);Desplazamiento virtual
Para listas muy grandes, renderice solo las filas visibles con cdk-virtual-scroll-viewport de CDK, manteniendo pequeño el DOM independientemente del tamaño de los datos.
<cdk-virtual-scroll-viewport itemSize="48">
<div *cdkVirtualFor="let item of items">
{{ item.name }}
</div>
</cdk-virtual-scroll-viewport>Comprobación rápida
Compruebe cuánto entiende la optimización de listas.
Resumen
Ha aprendido a optimizar listas con @for ... track (o el trackBy heredado) mediante claves estables, un bloque @empty, actualizaciones inmutables con OnPush y desplazamiento virtual para colecciones muy grandes.
Preguntas frecuentes
¿La lección «Optimización de listas y renderizado» es gratis?
Sí — el texto completo de «Optimización de listas y renderizado» 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 Angular Academy, actualiza a CoddyKit PRO. El curso de Angular Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Optimización de listas y renderizado»?
Acelerar listas grandes mediante tracking Practicas Angular 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 Angular Academy?
No se requiere experiencia previa. Angular 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 4 de 4.
¿Cuánto tiempo toma la lección «Optimización de listas y renderizado»?
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 Angular Academy?
Sí. Cada lección de Angular 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
- Cómo funciona la detección de cambios
- Detección de cambios con OnPush
- Angular sin zonas
- Optimización de listas y renderizado