Angular Academy · Lekcja

Optymalizacja list i renderowania

Przyspieszać duże listy za pomocą śledzenia zmian

Lekcja 4 z 413 kroki

Optymalizacja list i renderowania to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Angular Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Angular Academy zawiera 4 lekcji w sumie.

Dlaczego renderowanie list ma znaczenie

Listy są najczęstszym źródłem problemów z wydajnością. Ponowne renderowanie całej listy przy każdej zmianie powoduje niepotrzebną pracę i resetuje stan DOM. Angular udostępnia narzędzia do wydajnego renderowania.

Blok @for

Wbudowany blok sterowania przepływem @for wymaga wyrażenia track, aby Angular mógł identyfikować poszczególne elementy podczas kolejnych aktualizacji.

@for (item of items(); track item.id) {
  <li>{{ item.name }}</li>
}

Dlaczego track jest wymagane

Bez stabilnej tożsamości Angular nie może ustalić, które elementy zostały przeniesione, dodane lub usunięte. track mapuje każdy renderowany węzeł na jego dane, dzięki czemu DOM jest ponownie wykorzystywany zamiast tworzony od nowa.

Śledzenie po identyfikatorze

Należy użyć unikatowego, stabilnego klucza, takiego jak identyfikator. W przypadku list zmieniających kolejność należy unikać track $index, ponieważ zmiany indeksów powodują niepotrzebne przekształcenia DOM.

@for (user of users(); track user.id) {
  <app-user-card [user]="user" />
}

Kiedy używać track $index

Jeśli elementy nie mają unikatowego identyfikatora i nigdy nie zmieniają kolejności, jak w dziennikach, do których tylko dopisywane są nowe elementy, użycie track $index jest dopuszczalne.

@for (line of logLines(); track $index) {
  <p>{{ line }}</p>
}

Starszy mechanizm trackBy

W przypadku starszego *ngFor należy dostarczyć funkcję trackBy zwracającą stabilny klucz.

trackById(index: number, item: Item) {
  return item.id;
}

trackBy w szablonie

Funkcję należy wskazać w mikroskładni *ngFor.

<li *ngFor="let item of items; trackBy: trackById">
  {{ item.name }}
</li>

Puste i ładowane widoki

@for obsługuje blok @empty używany, gdy kolekcja jest pusta, dzięki czemu można uniknąć dodatkowych sprawdzeń za pomocą *ngIf.

@for (item of items(); track item.id) {
  <li>{{ item.name }}</li>
} @empty {
  <li>No items yet.</li>
}

Unikanie wywołań funkcji w wiązaniach

Funkcje w szablonach są uruchamiane przy każdym sprawdzeniu. Zamiast wywoływać metody w blokach @for, należy wcześniej obliczyć wartości i zapisać je w sygnałach lub polach z memoizacją.

OnPush i niezmienne listy

Należy połączyć OnPush z tworzeniem nowej referencji tablicy przy każdej zmianie. Przy prawidłowym użyciu track Angular aktualizuje tylko te wiersze, które rzeczywiście się zmieniły.

this.items.update(list => [...list, newItem]);

Przewijanie wirtualne

W przypadku bardzo dużych list należy renderować tylko widoczne wiersze za pomocą cdk-virtual-scroll-viewport z CDK, utrzymując mały DOM niezależnie od rozmiaru danych.

<cdk-virtual-scroll-viewport itemSize="48">
  <div *cdkVirtualFor="let item of items">
    {{ item.name }}
  </div>
</cdk-virtual-scroll-viewport>

Szybki test

Sprawdź swoją wiedzę na temat optymalizacji list.

Odpowiedz w interaktywnej lekcji

Podsumowanie

Dowiedziałeś się, jak optymalizować listy za pomocą @for ... track lub starszego trackBy, używając stabilnych kluczy, bloku @empty, niezmiennych aktualizacji z OnPush oraz przewijania wirtualnego dla bardzo dużych kolekcji.

Bezpłatny start

Ucz się HTML dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy: 38
Lekcje: 144

Zacznij naukę bezpłatnie Wyświetl pełny kurs

Często zadawane pytania

Czy lekcja „Optymalizacja list i renderowania” jest bezpłatna?

Tak — pełny tekst „Optymalizacja list i renderowania” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Angular Academy, przejdź na CoddyKit PRO. Kurs Angular Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Optymalizacja list i renderowania”?

Przyspieszać duże listy za pomocą śledzenia zmian Ćwiczysz Angular Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Angular Academy?

Nie wymagamy żadnego doświadczenia. Angular Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „Optymalizacja list i renderowania”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Angular Academy?

Tak. Każda lekcja Angular Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Angular Academy