Ottimizzare liste e rendering
Velocizzare le liste numerose con il tracking
Ottimizzare liste e rendering è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Angular Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Angular Academy include 4 lezioni in totale.
Perché è importante il rendering delle liste
Le liste sono il punto critico più comune per le prestazioni. Ridisegnare un'intera lista a ogni modifica spreca lavoro e reimposta lo stato del DOM. Angular offre strumenti per eseguire il rendering in modo efficiente.
Il blocco @for
Il costrutto integrato per il controllo del flusso @for richiede un'espressione track, così Angular può identificare ogni elemento tra un aggiornamento e l'altro.
@for (item of items(); track item.id) {
<li>{{ item.name }}</li>
}Perché track è obbligatorio
Senza un'identità stabile, Angular non può determinare quali elementi siano stati spostati, aggiunti o rimossi. track associa ogni nodo renderizzato ai relativi dati, in modo da riutilizzare il DOM invece di ricrearlo.
Tracciare in base all'identità
Usate una chiave univoca e stabile, ad esempio un id. Evitate track $index per le liste che vengono riordinate, poiché i cambiamenti degli indici causano modifiche non necessarie al DOM.
@for (user of users(); track user.id) {
<app-user-card [user]="user" />
}Quando usare track $index
Se gli elementi non hanno un id univoco e non vengono mai riordinati (come nei log a cui si aggiungono solo elementi), track $index è accettabile.
@for (line of logLines(); track $index) {
<p>{{ line }}</p>
}Il trackBy legacy
Con il vecchio *ngFor, fornite una funzione trackBy che restituisca una chiave stabile.
trackById(index: number, item: Item) {
return item.id;
}trackBy nel template
Fate riferimento alla funzione nella microsintassi di *ngFor.
<li *ngFor="let item of items; trackBy: trackById">
{{ item.name }}
</li>Stati vuoto e caricamento
@for supporta un blocco @empty da usare quando la raccolta è vuota, evitando controlli *ngIf aggiuntivi.
@for (item of items(); track item.id) {
<li>{{ item.name }}</li>
} @empty {
<li>No items yet.</li>
}Evitare le chiamate a funzioni nei binding
Le funzioni nei template vengono eseguite a ogni controllo. Calcolate in anticipo i valori nei signals o in campi memoizzati invece di chiamare metodi nei corpi di @for.
OnPush + liste immutabili
Combinate OnPush con nuovi riferimenti agli array a ogni modifica. Con un track corretto, Angular aggiorna solo le righe effettivamente cambiate.
this.items.update(list => [...list, newItem]);Scorrimento virtuale
Per le liste molto grandi, eseguite il rendering solo delle righe visibili con cdk-virtual-scroll-viewport del CDK, mantenendo ridotte le dimensioni del DOM indipendentemente dalla quantità di dati.
<cdk-virtual-scroll-viewport itemSize="48">
<div *cdkVirtualFor="let item of items">
{{ item.name }}
</div>
</cdk-virtual-scroll-viewport>Verifica rapida
Verificate la vostra comprensione dell'ottimizzazione delle liste.
Riepilogo
Avete imparato a ottimizzare le liste con @for ... track (o il legacy trackBy) usando chiavi stabili, un blocco @empty, aggiornamenti immutabili con OnPush e lo scorrimento virtuale per raccolte molto grandi.
Domande Frequenti
La lezione «Ottimizzare liste e rendering» è gratuita?
Sì — il testo completo di «Ottimizzare liste e rendering» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Angular Academy, passa a CoddyKit PRO. Il corso Angular Academy include 4 lezioni in totale.
Cosa imparerò in «Ottimizzare liste e rendering»?
Velocizzare le liste numerose con il tracking Eserciti Angular Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Angular Academy?
Non è richiesta alcuna esperienza precedente. Angular Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.
Quanto tempo richiede la lezione «Ottimizzare liste e rendering»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Angular Academy?
Sì. Ogni lezione Angular Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Come funziona il rilevamento delle modifiche
- Rilevamento delle modifiche OnPush
- Angular senza zone
- Ottimizzare liste e rendering