Lazy belastning og applikationshydrering interagerer på en kompleks og ofte modstridende måde, primært fordi hydrering kræver udførelse af applikationskode ivrig, hvilket undergraver fordelene ved doven belastning.
Hvordan hydrering fungerer og dens indflydelse på doven belastning
Hydrering er den proces, hvorpå en server-gengivet HTML-side "aktiveres" på klientsiden ved at køre JavaScript for at fastgøre begivenhedslyttere, gendanne komponenttilstand og gøre siden interaktiv. Denne proces involverer udførelse af applikationskomponenterne, der starter fra roden og krydser ned ad komponenttræet for at forstå tilstand, bindinger og begivenhedshåndterere.
Da hydrering skal besøge enhver komponent i det aktuelle gengivelsestræ for at afgøre, om det skal være interaktivt, tvinger det alle disse komponenter til at blive indlæst og udført ivrigt. Dette betyder, at selv hvis du markerer nogle komponenter til doven belastning, vil hydrering stadig få dem til at blive indlæst straks, hvis de er en del af det indledende rendertræ. Hydrering er sekventiel og kan ikke springe mellemliggende komponenter over til direkte hydrat børneponenter, så alle overordnede komponenter skal hydreres først [1] [6].
Hvorfor sabotering af hydratiseringer doven belastning
- ivrig udførelse: Hydrering kræver udførelse af alle komponenter i rendertræet, som forhindrer doven belastning i at udsætte belastningen af kode for disse komponenter.
- Komponentafhængigheder: Børnekomponenter afhænger af rekvisitter fra overordnede komponenter, så forældre skal først hydreres og tvinger en kæde af ivrig belastning.
- Begivenhedshåndterere og tilstand: Hydrering skal også indstille begivenhedslyttere og gendanne staten, som kræver kørsel af komponentkoden på forhånd.
- Udviklerbelastning: For at opnå doven belastning under hydrering skal udviklere manuelt håndtere forudgående og kodeopdeling, som kan være kompleks og fejlutsat [6] [7].
Når doven belastning fungerer på trods af hydrering
Lazy belastning kan stadig være effektiv for komponenter, der ikke er en del af det indledende rendertræ og dermed ikke besøgt under hydrering. Eksempler inkluderer:
- Dialoger eller modaler, der åbner for brugerinteraktion
- Komponenter på forskellige ruter, der ikke er gengivet oprindeligt
I disse tilfælde kan komponenterne virkelig være doven belastet, fordi hydrering ikke tvinger deres øjeblikkelige udførelse [6].
Teknikker til at optimere hydrering og doven belastning
Nogle moderne rammer og biblioteker forsøger at optimere denne interaktion ved at implementere doven hydrering eller selektiv hydrering, hvor komponenter kun hydreres, når det er nødvendigt, f.eks. Når de bliver synlige i visningen:
-Biblioteker som `Next-Lazy-Hydration-on-Scroll` i Next.js tillader, at hydrering udskydes, indtil en komponent ruller i betragtning.
- Ved hjælp af IntersectionObserver API kan komponenter kun være doven indlæst og hydreret, når de indtaster visningsporten.
-I VUE/NUXT, dovne hydratiseringsteknikker og plugins (f.eks. `NUXT-LAZY-HYDRATE`) gør det muligt at forsinke hydrering, indtil hovedtråden er inaktiv, eller komponenten er synlig, hvilket forbedrer tiden til interaktive og første inputforsinkelsesmetoder [4] [5].
SAMMENDRAG
Hydrering og doven belastning er grundlæggende i odds, fordi hydrering kræver ivrig udførelse af komponenter i rendertræet, hvilket forhindrer doven belastning i at udsætte kodeudførelse. Imidlertid forbliver doven belastning effektiv for komponenter uden for det indledende hydratiseringsomfang. Nye teknikker som doven hydrering sigter mod at forene denne konflikt ved selv at udsætte hydrering, forbedre ydeevnen og brugeroplevelsen.
I det væsentlige saboterer hydratiseringen doven belastning under den indledende sidebelastning, men med omhyggelige arkitektoniske valg og specialiserede værktøjer kan udviklere optimere hvornår og hvordan komponenter hydreres til at genvinde fordelene ved doven belastning [1] [6] [7].
Citater:
[1] https://www.infoq.com/presentations/hydration-lazy-loading/
[2] https://qconsf.com/presentation/oct2023/hydration-and-lazy-load-are-inompatible
[3] https://github.com/vercel/next.js/discussioner/29751
[4] https://www.wisp.blog/blog/lazy-loading-in-nextjs-the-future-of-ressource-optimization
)
[6] https://www.builder.io/blog/hydration-sabotages lazy-loading
[7] https://www.linkedin.com/posts/misko-hevery-3883b1_lazy-load-is-like-scise-ebyyone-says-aktivitet-7115086933935984641-5oxk
[8] https://www.techtarget.com/searchsoftwarequality/definition/lazy-loading