A lusta betöltés és az alkalmazás hidratálása összetett és gyakran ellentmondásos módon kölcsönhatásba lép, elsősorban azért, mert a hidratálásnak az alkalmazáskódot alig kell végrehajtani, ami aláássa a lusta terhelés előnyeit.
Hogyan működik a hidratálás és annak hatása a lusta terhelésre
A hidratálás az a folyamat, amellyel a szerver-kijelölt HTML oldalt "aktiválják" az ügyfél oldalán, a JavaScript futtatásával az események hallgatóinak rögzítéséhez, az összetevő állapotának visszaállításához és az oldal interaktívvá tételéhez. Ez a folyamat magában foglalja az alkalmazáskomponensek végrehajtását a gyökértől kezdve, és az alkatrészfát áthaladni az állapot, a kötések és az eseménykezelők megértése érdekében.
Mivel a hidratációnak meg kell látogatnia az aktuális renderfa minden alkotóelemét, hogy meghatározza, hogy interaktívnak kell -e lennie, mindezeket az alkatrészeket lelkesen kell betölteni és végrehajtani. Ez azt jelenti, hogy még ha néhány alkatrészt is megjelölnek a lusta terheléshez, a hidratáció továbbra is azonnal betölti őket, ha azok a kezdeti renderfa részei. A hidratálás szekvenciális, és nem tudja kihagyni a közbenső komponenseket a gyermekkomponensek közvetlen hidratálásához, így minden szülői komponenst először hidratálni kell [1] [6].
Miért a hidratáció szabotálja a lusta betöltést
- Lelkes végrehajtás: A hidratálás megköveteli a renderfa összes alkatrészének végrehajtását, ami megakadályozza, hogy a lusta betöltés a kód betöltésének elhalasztását ezen alkatrészekhez.
- Komponens -függőségek: A gyermekkomponensek a szülői komponensek kellékeitől függnek, ezért a szülőket először hidratálni kell, és a lelkes terhelés láncát kényszerítik.
- Eseménykezelők és állapot: A hidratációnak be kell állítania az eseménytámadókat és a visszaállítási állapotot is, amely előzetesen futtatja az összetevők kódját.
- Fejlesztői terhek: A lusta terhelés eléréséhez a hidratálás során a fejlesztőknek manuálisan kell kezelniük az előzetes letöltést és a kódfelosztást, amelyek összetett és hibára hajlamosak lehetnek [6] [7].
Amikor a lusta terhelés a hidratálás ellenére működik
A lusta terhelés továbbra is hatékony lehet olyan alkatrészeknél, amelyek nem tartoznak a kezdeti megjelenítő fának, és így a hidratálás során nem látogatnak meg. Példák a következők:
- párbeszédek vagy módszerek, amelyek megnyílik a felhasználói interakción
- Komponensek különböző útvonalakon, amelyeket kezdetben nem látnak el
Ezekben az esetekben az alkatrészek valóban lusták lehetnek, mivel a hidratáció nem kényszeríti azonnali végrehajtását [6].
technikák a hidratáció és a lusta betöltés optimalizálására
Néhány modern keretek és könyvtárak megkísérelnek optimalizálni ezt az interakciót lusta hidratálás vagy szelektív hidratáció megvalósításával, ahol az alkatrészek csak szükség esetén hidratálódnak, például amikor a nézetablakban láthatóvá válnak:
-Az olyan könyvtárak, mint a „következő-lusta-hidráció-on-scroll”, a következő.js lehetővé teszi a hidratálást, amíg egy komponens be nem fordul.
- Az InterSectionObserver API használatával az alkatrészek csak akkor lehetnek lusták és hidratálhatók, amikor belépnek a nézetablakba.
.
Összegzés
A hidratálás és a lusta terhelés alapvetően ellentmondásos, mivel a hidratáció megköveteli az alkatrészek lelkes végrehajtását a megjelenítő fában, ami megakadályozza a lusta betöltést a kód végrehajtásának halasztásától. A lusta terhelés azonban továbbra is hatékony a kezdeti hidratációs hatókörön kívüli alkatrészeknél. A kialakulóban lévő technikák, mint például a lusta hidratálás, célja ennek a konfliktusnak a összeegyeztetése azáltal, hogy maga a hidratációt halasztja, javítva a teljesítményt és a felhasználói élményt.
Lényegében a hidratációs szabotálja a lusta terhelést a kezdeti oldalterhelés során, de gondos építészeti választásokkal és speciális eszközökkel a fejlesztők optimalizálhatják, mikor és hogyan hidratálják az alkatrészeket, hogy visszanyerjék a lusta terhelés előnyeit [1] [6] [7].
Idézetek:
[1] https://www.infoq.com/presentations/hydration-lazy-loading/
[2] https://qconsf.com/presentation/oct2023/hydration-and-lazy-loading-are-incompatible
[3] https://github.com/vercel/next.js/discussions/29751
[4] https://www.wisp.blog/blog/lazy-loading-in-nextjs-the-future-of-resource-optimization
[5] https://vueschool.io/articles/vuejs-tutorials/lazy-hydration-and-server-components-in-nuxt-vue-js-3-performance/
[6] https://www.builder.io/blog/hydration-sabotages-lazy-loading
[7] https://www.linedin.com/posts/misko-hezery-3883b1_lazy-loading-is-like-exercise-everyone-says-says-says-7115086939359841-5oxk
[8] https://www.techtarget.com/searchsoftwarequality/definition/lazy-loading