Angular Academy · Oppitunti

Listojen ja renderöinnin optimointi

Nopeuttakaa suuria listoja seurannan avulla

Oppitunti 4/413 vaihetta

Listojen ja renderöinnin optimointi on ilmainen Angular Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Angular Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Angular Academy-kurssilla on yhteensä 4 oppituntia.

Miksi listojen hahmontamisella on merkitystä

Listat ovat yleisin suorituskyvyn pullonkaula. Koko listan hahmontaminen uudelleen jokaisen muutoksen yhteydessä tuhlaa työtä ja nollaa DOM-tilan. Angular tarjoaa työkaluja tehokkaaseen hahmontamiseen.

@for-lohko

Sisäänrakennettu ohjausvirtarakennelma @for edellyttää track-lauseketta, jotta Angular voi tunnistaa jokaisen alkion päivitysten välillä.

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

Miksi track on pakollinen

Ilman pysyvää identiteettiä Angular ei voi päätellä, mitkä alkiot siirtyivät, lisättiin tai poistettiin. track yhdistää jokaisen hahmonnetun solmun dataansa, joten DOM käytetään uudelleen sen sijaan, että se luotaisiin uudelleen.

Seuranta identiteetin perusteella

Käytä yksilöllistä ja pysyvää avainta, kuten id:tä. Vältä track $index-lauseketta uudelleenjärjestettävissä listoissa, koska indeksien muuttuminen aiheuttaa tarpeetonta DOM:n uudelleenkäsittelyä.

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

track $index sopivissa tilanteissa

Jos alkioilta puuttuu yksilöllinen id eivätkä ne koskaan järjesty uudelleen (esimerkiksi vain lisäämällä kasvavat lokit), track $index on hyväksyttävä.

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

Perinteinen trackBy

Vanhemman *ngFor-rakenteen kanssa annat trackBy-funktion, joka palauttaa pysyvän avaimen.

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

trackBy templatessa

Viittaa funktioon *ngFor-mikrosyntaksissa.

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

Tyhjät ja lataustilat

@for tukee @empty-lohkoa tyhjälle kokoelmalle, joten ylimääräisiä *ngIf-tarkistuksia ei tarvita.

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

Vältä funktiokutsuja sidonnoissa

Templaten funktiot suoritetaan jokaisella tarkistuskierroksella. Esilaske arvot signaaleihin tai memoisoituihin kenttiin sen sijaan, että kutsuisit metodeja @for-lohkoissa.

OnPush + muuttumattomat listat

Yhdistä OnPush siihen, että jokaisella muutoksella luodaan uusi taulukkoviite. Kun track on määritetty oikein, Angular päivittää vain todella muuttuneet rivit.

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

Virtuaalinen vieritys

Hyvin suurissa listoissa hahmonna vain näkyvät rivit CDK:n cdk-virtual-scroll-viewport-komponentilla, jolloin DOM:n koko pysyy pienenä datan määrästä riippumatta.

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

Pikatarkistus

Testaa, miten hyvin ymmärrät listojen optimoinnin.

Vastaa interaktiivisessa oppitunnissa

Kertaus

Opit optimoimaan listoja käyttämällä @for ... track-rakennetta (tai perinteistä trackBy-rakennetta), pysyviä avaimia, @empty-lohkoa, muuttumattomia päivityksiä OnPushin kanssa sekä virtuaalista vieritystä erittäin suurille kokoelmille.

Aloita maksutta

Opi HTML tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 38
Oppitunnit: 144

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Listojen ja renderöinnin optimointi” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Angular Academy-oppimispolun 3 oppituntia, myös oppitunnin “Listojen ja renderöinnin optimointi”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Angular Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Listojen ja renderöinnin optimointi”?

Nopeuttakaa suuria listoja seurannan avulla Harjoittelet Angular Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Angular Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Angular Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.

Kuinka kauan ”Listojen ja renderöinnin optimointi”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Angular Academy-oppitunnilla?

Kyllä. Jokainen Angular Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: Angular Academy