Laisk laadimine ja rakenduste hüdratsioon interakteeruvad keerulisel ja sageli vastuoluliselt, peamiselt seetõttu, et hüdratsioon nõuab innukalt rakenduskoodi täitmist, mis kahjustab laiska laadimise eeliseid.
Kuidas hüdratsioon toimib ja selle mõju laiskale laadimisele
Hüdratsioon on protsess, mille käigus serveriga renderdatud HTML-leht on kliendi poolel aktiveeritud, käivitades JavaScripti sündmuste kuulajad, taastage komponendi olek ja muutke lehe interaktiivseks. See protsess hõlmab rakenduse komponentide käivitamist alates juurest ja komponendipuust allapoole liikumist, et mõista olekut, köiteid ja sündmuste käitlejaid.
Kuna hüdratsioon peab külastama kõiki praeguse renderühma komponente, et teha kindlaks, kas see peab olema interaktiivne, sunnib see kõiki neid komponente innukalt laadima ja teostama. See tähendab, et isegi kui märgite mõned komponendid laiska laadimise jaoks, põhjustab hüdratsioon nende kohe laadimist, kui need on osa algsest renderdamisest. Hüdratsioon on järjestikune ja ei saa vahepealseid komponente lapse komponentide otseseks hüdraatimiseks vahele jätta, nii et kõik vanemate komponendid tuleb kõigepealt hüdraatuda [1] [6].
Miks hüdratsioon saboteerib laiska laadimist
- Innukas täitmine: hüdratsioon nõuab kõigi renderdamispuu komponentide täitmist, mis takistab laisakoormusel nende komponentide koodi laadimise edasilükkamist.
- Komponentide sõltuvused: Lapse komponendid sõltuvad vanemate komponentide rekvisiitidest, nii et vanemad tuleb kõigepealt hüdraatuda, sundides innuka laadimise ahelat.
- Sündmuste käitlejad ja olek: hüdratsioon peab seadistama ka sündmuste kuulajad ja taastama oleku, mis nõuab komponendi koodi käitamist ette.
- Arendaja koormus: laiska laadimise saavutamiseks hüdratsiooni ajal peavad arendajad käsitsi haldama eelnõustamist ja koodide jagamist, mis võib olla keeruline ja vigade tekitav [6] [7].
Kui laisk laadimine toimib vaatamata hüdratsioonile
Laisk laadimine võib endiselt olla efektiivne komponentide jaoks, mis ei kuulu algse renderdamise puu osa ja ei külastata seega hüdratsiooni ajal. Näited hõlmavad:
- dialoogid või modaalid, mis avanevad kasutaja suhtlemisel
- komponendid erinevatel marsruutidel, mida esialgu ei muudeta
Nendel juhtudel võib komponendid olla tõeliselt laisad koormatud, kuna hüdratsioon ei sunni nende kohest hukkamist [6].
Tehnikad hüdratsiooni ja laiska laadimise optimeerimiseks
Mõned kaasaegsed raamistikud ja raamatukogud püüavad seda koostoimet optimeerida, rakendades laiska hüdratsiooni või selektiivse hüdratsiooni, kus komponendid on hüdreeritud ainult vajadusel, näiteks kui need muutuvad vaatepordis nähtavaks:
-Raamatukogud, näiteks "Next-Lazy-Hydration-On-Scroll" järgmises.js võimaldab hüdratsiooni edasi lükata, kuni komponent kerib vaatesse.
- Ristitootmise API abil saab komponente laisaid laadida ja hüdreerida ainult siis, kui nad sisenevad vaatepordile.
-VUE/NUXT-s võimaldavad laiska hüdratsioonitehnika ja pistikprogrammid (nt `Nuxt-Lazy-Hydrate`) hüdratsiooni viivitada, kuni peamine niit on jõude või komponent on nähtav, parandades aega interaktiivsete ja esimese sisendi viivituse mõõdikutele [4] [5].
Kokkuvõte
Hüdratsioon ja laisk laadimine on põhimõtteliselt vastuolus, kuna hüdratsioon nõuab komponentide innukat täitmist renderduspuus, mis takistab laiska laadimise koodi täitmise edasilükkamist. Laisa laadimine on siiski efektiivne komponentide jaoks väljaspool esialgset hüdratsiooni ulatust. Selliste tekkivate tehnikate nagu laisa hüdratsiooni eesmärk on see konflikt ühitada, lükates hüdratsiooni ise edasi, parandades jõudlust ja kasutajakogemust.
Sisuliselt saboteerib hüdratsioon laisakoormamise ajal laisakoormamist, kuid hoolikate arhitektuurivalikute ja spetsialiseeritud tööriistadega saavad arendajad optimeerida, millal ja kuidas komponendid hüdraatuvad, et taastada laisakoormuse eelised [1] [6] [7].
Tsitaadid:
[1] https://www.infoq.com/presentations/hydration-lazy-loading/
]
[3] https://github.com/vercel/next.js/dicusions/29751
]
]
[6] https://www.builder.io/blog/hydration-sabotages-lazy-loading
]
[8] https://www.techtarget.com/searchsoftwarequality/definition/lazy-loading