Optimiser les listes et le rendu
Accélérez les grandes listes grâce au suivi
Optimiser les listes et le rendu est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Angular Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Angular Academy comprend 4 leçons au total.
Pourquoi le rendu des listes est important
Les listes constituent le principal point chaud en matière de performances. Afficher à nouveau une liste entière à chaque changement gaspille des ressources et réinitialise l'état du DOM. Angular vous fournit des outils pour effectuer un rendu efficace.
Le bloc @for
Le flux de contrôle intégré @for exige une expression track afin qu'Angular puisse identifier chaque élément lors des mises à jour.
@for (item of items(); track item.id) {
<li>{{ item.name }}</li>
}Pourquoi track est requis
Sans identité stable, Angular ne peut pas déterminer quels éléments ont été déplacés, ajoutés ou supprimés. track associe chaque nœud rendu à ses données afin de réutiliser le DOM au lieu de le recréer.
Suivre par identité
Utilisez une clé unique et stable, comme un identifiant. Évitez track $index pour les listes qui sont réordonnées, car les changements d'index provoquent des modifications inutiles du DOM.
@for (user of users(); track user.id) {
<app-user-card [user]="user" />
}Utiliser track $index au besoin
Si les éléments n'ont pas d'identifiant unique et ne sont jamais réordonnés (par exemple, des journaux auxquels on ajoute uniquement des entrées), track $index convient.
@for (line of logLines(); track $index) {
<p>{{ line }}</p>
}L'ancien trackBy
Avec l'ancien *ngFor, vous fournissez une fonction trackBy qui renvoie une clé stable.
trackById(index: number, item: Item) {
return item.id;
}trackBy dans le modèle
Référencez la fonction dans la microsyntaxe *ngFor.
<li *ngFor="let item of items; trackBy: trackById">
{{ item.name }}
</li>États vide et chargement
@for prend en charge un bloc @empty lorsque la collection est vide, ce qui évite d'ajouter des vérifications *ngIf.
@for (item of items(); track item.id) {
<li>{{ item.name }}</li>
} @empty {
<li>No items yet.</li>
}Éviter les appels de fonctions dans les liaisons
Les fonctions présentes dans les modèles s'exécutent à chaque vérification. Calculez à l'avance les valeurs dans des signaux ou des champs mémorisés au lieu d'appeler des méthodes dans les corps de @for.
OnPush et listes immuables
Associez OnPush à de nouvelles références de tableaux à chaque changement. Avec un track approprié, Angular ne met à jour que les lignes qui ont réellement changé.
this.items.update(list => [...list, newItem]);Défilement virtuel
Pour les très grandes listes, n'affichez que les lignes visibles avec le CDK cdk-virtual-scroll-viewport, afin de garder un DOM réduit quelle que soit la taille des données.
<cdk-virtual-scroll-viewport itemSize="48">
<div *cdkVirtualFor="let item of items">
{{ item.name }}
</div>
</cdk-virtual-scroll-viewport>Vérification rapide
Testez votre compréhension de l'optimisation des listes.
Récapitulatif
Vous avez appris à optimiser les listes avec @for ... track (ou l'ancien trackBy) grâce à des clés stables, un bloc @empty, des mises à jour immuables avec OnPush et le défilement virtuel pour les très grandes collections.
Apprends HTML avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 38
- Leçons
- 144
Questions Fréquemment Posées
La leçon « Optimiser les listes et le rendu » est-elle gratuite ?
Oui — le texte complet de « Optimiser les listes et le rendu » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Angular Academy, passe à CoddyKit PRO. Le cours Angular Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Optimiser les listes et le rendu » ?
Accélérez les grandes listes grâce au suivi Tu pratiques Angular Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Angular Academy ?
Aucune expérience préalable n'est requise. Angular Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « Optimiser les listes et le rendu » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Angular Academy ?
Oui. Chaque leçon Angular Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Fonctionnement de la détection des changements
- Détection des changements avec OnPush
- Angular sans zone
- Optimiser les listes et le rendu