Inkrementaalinen hydraatio @deferillä
Hydratoikaa sivun osia tarpeen mukaan
Inkrementaalinen hydraatio @deferillä on ilmainen Angular Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/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.
Täydellisen hydratoinnin hinta
Täydellinen hydratointi käynnistää jokaisen komponentin heti. Inkrementaalinen hydratointi hydroidaan sen sijaan sivun osia tarpeen mukaan ja lykkää osioiden JavaScriptin lataamista, kunnes sitä tarvitaan.
Rakennettu defer-toiminnon päälle
Inkrementaalinen hydratointi käyttää @defer-lohkoa yhdessä erityisten hydrate-laukaisinten kanssa. Palvelin renderöi sisällön edelleen, mutta asiakas hydroidaan vasta, kun laukaisin aktivoituu.
@defer (hydrate on viewport) {
<app-comments />
}Käyttöönotto
Ottakaa toiminto käyttöön hydratointiproviderissa withIncrementalHydration()-kutsulla. Tämä ottaa hydrate-laukaisimet käyttöön templateissa.
import { provideClientHydration, withIncrementalHydration } from '@angular/platform-browser';
providers: [provideClientHydration(withIncrementalHydration())]hydrate on viewport
Yleisin laukaisin hydroidaan, kun lohko vierii näkyviin. Näkyvän alueen alapuolinen sisältö pysyy passiivisena, joten JavaScriptiä suoritetaan vasta, kun käyttäjä saavuttaa sen.
@defer (hydrate on viewport) {
<app-related-products />
}hydrate on interaction
Hydroidaan lohko, kun käyttäjä on sen kanssa vuorovaikutuksessa, esimerkiksi napsauttaa tai painaa näppäintä. Tämä sopii erinomaisesti näkyville, mutta harvoin käytettäville vimpaimille, kuten laajennettavalle paneelille.
@defer (hydrate on interaction) {
<app-share-menu />
}hydrate on idle ja timer
Käyttäkää hydrate on idle-laukaisinta, kun selain on joutilaana, tai hydrate on timer(2s)-laukaisinta, jos hydratointi halutaan tehdä viiveen jälkeen. Tämä sopii ei-kriittisille alueille.
@defer (hydrate on idle) {
<app-newsletter />
}hydrate never
hydrate never pitää palvelimella renderöidyn HTML:n staattisena: se näytetään, mutta lohkolle ei koskaan toimiteta JavaScriptiä. Tämä sopii puhtaasti esitysmuotoiselle, ei-vuorovaikutteiselle sisällölle.
@defer (hydrate never) {
<app-footer-links />
}Ero tavalliseen defer-toimintoon
Tavallinen @defer CSR-kontekstissa näyttää paikanvaraajan latauksen ajan. Inkrementaalisessa hydratoinnissa sisältö on jo palvelimella renderöity ja näkyvissä; laukaisin määrittää vain, milloin vuorovaikutteisuus eli hydratointi käynnistyy.
Laukaisinten yhdistäminen
Voitte yhdistää laukaisimia, jolloin lohko hydroidaan ensimmäisen tapahtuvan ehdon perusteella. Näin valmius ja resurssien säästäminen voidaan tasapainottaa.
@defer (hydrate on viewport; hydrate on interaction) {
<app-map />
}Pienempi alustava JavaScript-määrä
Kun raskaiden tai näkyvän alueen alapuolisten komponenttien hydratointia lykätään, vuorovaikutteisuuteen tarvittavan alustavan JavaScriptin määrä pienenee. Tämä parantaa vuorovaikutteiseksi muuttumiseen kuluvaa aikaa ja INP-arvoa kriittisellä polulla.
Laukaisimien harkittu valinta
Hydroidaan näkyvän alueen yläpuoliset vuorovaikutteiset elementit heti tai joutoaikana; lykätään näkyvän alueen alapuolisten ja harvoin käytettyjen vimpaimien hydratointia näkymiseen tai vuorovaikutukseen asti. Mitatkaa vaikutukset varmistaaksenne hyödyt.
Pikatarkistus
Tarkistakaa, miten hyvin tunnette inkrementaalisen hydratoinnin.
Kertaus
Käytitte @defer (hydrate ...)-lohkoa yhdessä withIncrementalHydration()-toiminnon kanssa hydratointiin näkymisen, vuorovaikutuksen, joutoajan, ajastimen tai ei koskaan -ehdon perusteella. Tämä pienentää alustavaa JavaScript-määrää ja parantaa vuorovaikutteisuutta lykkäämällä näkyvän alueen alapuolisten ja harvoin käytettyjen lohkojen hydratointia.
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
Usein kysytyt kysymykset
Onko oppitunti ”Inkrementaalinen hydraatio @deferillä” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Angular Academy-oppimispolun 3 oppituntia, myös oppitunnin “Inkrementaalinen hydraatio @deferillä”. 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 ”Inkrementaalinen hydraatio @deferillä”?
Hydratoikaa sivun osia tarpeen mukaan 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 3/4.
Kuinka kauan ”Inkrementaalinen hydraatio @deferillä”-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
- Mitä hydraatio on
- Täyden hydraation käyttöönotto
- Inkrementaalinen hydraatio @deferillä
- Core Web Vitals -mittareiden mittaaminen