Laiskakuormitus ja sovellus -nesteytys on vuorovaikutuksessa monimutkaisella ja usein ristiriitaisella tavalla, pääasiassa siksi, että nesteytys vaatii sovelluskoodin suorittamista innokkaasti, mikä heikentää laiskojen kuormituksen etuja.
Kuinka nesteytys toimii ja sen vaikutus laiskaan kuormitukseen
Hydraatio on prosessi, jolla palvelimella varustettu HTML-sivu on "aktivoitu" asiakkaan puolella suorittamalla JavaScriptiä tapahtuman kuuntelijoiden kiinnittämiseen, palauttamaan komponenttitilat ja tekemällä sivusta vuorovaikutteinen. Tämä prosessi käsittää sovelluskomponenttien suorittamisen juuresta alkaen ja komponenttipuun kulkeminen tilaa, siteitä ja tapahtumien käsittelijöitä.
Koska nesteytyksen on vieraileva jokaisessa nykyisen renderöintipuun komponentissa sen määrittämiseksi, onko sen oltava interaktiivista, se pakottaa kaikki nämä komponentit lataamaan ja toteutetaan innokkaasti. Tämä tarkoittaa, että vaikka merkitsisit joitain komponentteja laiskaan kuormitukseen, nesteytys aiheuttaa silti niiden lataamisen heti, jos ne ovat osa alkuperäistä renderöintipuita. Hydraatio on peräkkäinen eikä se voi ohittaa välikomponentteja lapsikomponenttien suoraan hydratoimiseksi, joten kaikkien emäkomponenttien on oltava ensin hydratoitu [1] [6].
Miksi hydraatio sabotoi laiskaa lastausta
- innokas suoritus: nesteytys vaatii kaikkien renderöiden komponenttien suorittamisen, mikä estää laiskaa kuormitusta lykkäämästä koodin lastausta näille komponenteille.
- Komponenttien riippuvuudet: Lasten komponentit riippuvat emokomponenttien rekvisiittaista, joten vanhemmat on ensin hydratoitava, pakottaen innokkaan kuormitusketjun.
- Tapahtumankäsittelijät ja tila: nesteytyksen on myös asetettava tapahtuman kuuntelijat ja palautettava tila, joka vaatii komponenttikoodin suorittamista etukäteen.
- Kehittäjäkuorma: Laiskakuormituksen saavuttamiseksi nesteytyksen aikana kehittäjien on hallittava manuaalisesti esikäsittely ja koodin halkeaminen, mikä voi olla monimutkainen ja virheen alttiita [6] [7].
Kun laiska lastaus toimii nesteytyksestä huolimatta
Laiskakuormitus voi silti olla tehokas komponenteille, jotka eivät ole osa alkuperäistä renderöintipuita, ja siten ei käynyt nesteytyksen aikana. Esimerkkejä ovat:
- valintaikkunat tai modaalit, jotka avautuvat käyttäjän vuorovaikutuksessa
- Komponentit eri reiteillä, joita ei alun perin tehdä
Näissä tapauksissa komponentit voidaan todella ladata, koska nesteytys ei pakota niiden välitöntä suorituskykyä [6].
Nehote- ja laiskakuormituksen optimoinnin tekniikat
Jotkut nykyaikaiset puitteet ja kirjastot yrittävät optimoida tämän vuorovaikutuksen toteuttamalla laiskoja nesteytystä tai selektiivistä nesteytystä, jossa komponentit hydratoivat vain tarvittaessa, esimerkiksi kun ne näkyvät näkymässä:
-Kirjastot, kuten `seuraavana laiska hydraatio-on-scroll` seuraavassa.js, sallivat nesteytyksen lykkäämisen, kunnes komponentti vierittää näkymään.
- Komponentit voidaan ladata ja hydratoitua vain, kun ne saapuvat näkymäportiin, käyttämällä CrasctionObServer -sovellusliittymää.
-Vue/Nuxt, laiskojen hydraatiotekniikat ja laajennukset (esim. "Nuxt-Lazy-hydraatti") mahdollistavat nesteytyksen viivästymisen, kunnes päälanka on tyhjäkäynnillä tai komponentti on näkyvissä, parantaen aikaa interaktiiviseen ja ensimmäiseen syöttöviiveen mittariin [4] [5].
Yhteenveto
Hydraatio ja laiska kuormitus ovat pohjimmiltaan ristiriidassa, koska nesteytys vaatii komponenttien innokasta suorittamista renderöintipuussa, mikä estää laiskaa kuormitusta lykkäämästä koodin suorittamista. Laiska kuormitus pysyy kuitenkin tehokkaasti alkuperäisen nesteytysalueen ulkopuolella oleville komponenteille. Nousevat tekniikat, kuten laiska nesteytys, pyrkivät sovittamaan tämän konfliktin lykkäämällä itse nesteytystä, parantamalla suorituskykyä ja käyttökokemusta.
Pohjimmiltaan nesteytys sabotoi laiskaa lastausta ensimmäisen sivun kuormituksen aikana, mutta huolellisilla arkkitehtonisilla valinnoilla ja erikoistuneilla työkaluilla kehittäjät voivat optimoida milloin ja miten komponentit hydratoivat palauttamaan laiska kuormituksen edut [1] [6] [7].
Viittaukset:
[1] https://www.infoq.com/presentations/hydration-lazy-loading/
.
[3] https://github.com/vercel/next.js/discussions/29751
.
.
[6] https://www.builder.io/blog/hydration-sabotages-lazy-loading
[7.
[8] https://www.techtarget.com/searchsoftwarequality/definition/lazy-loading