JavaScript'i raamistike jõudlusvõrdlus: reaalse maailma testid kaasaegsetele rakendustele

Veebiarenduse dünaamilises maailmas on pidev arutelu selle üle, milline JavaScripti raamistik on „parim“. Arendajad kiidavad sageli oma lemmikuid, viidates arendajakogemusele, ökosüsteemi suurusele või õppimiskõverale. Lõppkasutajate ja ettevõtete jaoks tõuseb aga üks mõõdik sageli teistest kõrgemale: jõudlus. Kiire ja reageeriv rakendus võib olla erinevus konversiooni ja lahkumise, kasutaja rõõmu ja kasutaja frustratsiooni vahel.

Kuigi sünteetilistel testidel nagu TodoMVC on oma koht, ei suuda need sageli tabada kaasaegse veebirakenduse keerukust. Need testivad isoleeritud funktsioone vaakumis – stsenaarium, mida tootmises harva esineb. See artikkel läheneb teisiti. Sukeldume sügavale reaalse maailma rakenduse jõudlustesti, võrreldes esiotsa arenduse titaane – React, Vue ja Angular – koos uue põlvkonna väljakutsujate, Svelte'i ja SolidJS-iga. Meie eesmärk on liikuda kaugemale teoreetilistest argumentidest ja pakkuda käegakatsutavaid andmeid, mis aitavad teil teha oma järgmise projekti jaoks teadliku otsuse.

Miks on reaalse maailma testid olulised

Enne andmete esitamist on oluline mõista erinevust sünteetiliste ja reaalsete testide vahel. Sünteetilised testid keskenduvad sageli ühele korduvale ülesandele, näiteks 1000 ülesandeloendi elemendi loomisele ja hävitamisele. See on suurepärane raamistiku renderdusmootori stressitestimiseks, kuid ütleb vähe järgmise kohta:

• Esialgne laadimisjõudlus: Kui kiiresti muutub rakendus kasutatavaks esmakülastajale mobiilivõrgus? See hõlmab paketi suurust, parsimisaega ja hüdreerimisstrateegiat.
• Keeruline olekuhaldus: Kuidas raamistik käsitleb interaktsioone mitme, omavahel mitteseotud komponendi vahel, mis jagavad globaalset olekut?
• API latentsuse integreerimine: Kuidas rakendus tundub, kui see peab andmeid tooma, laadimisolekuid kuvama ja seejärel tulemusi renderdama?
• Marsruutimise jõudlus: Kui kiiresti ja sujuvalt saab kasutaja navigeerida erinevate lehtede või vaadete vahel ühelehelises rakenduses (SPA)?

Reaalse maailma test püüab neid stsenaariume simuleerida. Ehitades igas raamistikus identse, mõõdukalt keeruka rakenduse, saame mõõta jõudlusnäitajaid, mis mõjutavad otseselt kasutajakogemust ja seega ka ärieesmärke. Need mõõdikud on tihedalt seotud Google'i Core Web Vitalsiga (CWV), mis on nüüd osa selle otsingumootori järjestusalgoritmidest. Lühidalt öeldes ei ole jõudlus pelgalt tehniline mure; see on SEO ja äri seisukohast hädavajalik.

Võistlejad: lühike ülevaade

Oleme valinud viis kõige silmapaistvamat ja huvitavamat raamistikku tänapäeva ökosüsteemis. Igal neist on erinev filosoofia ja arhitektuur, mis mõjutab otseselt selle jõudlusomadusi.

React (v18)

Meta poolt arendatud ja hooldatud React on vaieldamatu turuliider. See populariseeris komponendipõhist arhitektuuri ja virtuaalset DOM-i (VDOM). VDOM toimib reaalse DOM-i mälusisese esitusena, võimaldades Reactil uuendusi tõhusalt pakettidena töödelda. Selle tohutu ökosüsteem ja talentide hulk teevad sellest paljude ettevõtete jaoks vaikimisi valiku kogu maailmas.

Vue (v3)

Vue'd kirjeldatakse sageli kui progressiivset raamistikku. See on tuntud oma ligipääsetava õppimiskõvera, suurepärase dokumentatsiooni ja paindlikkuse poolest. Vue 3 tõi kaasa olulisi jõudlusparandusi uue reaktiivsussüsteemiga, mis põhineb JavaScripti proksidel, ja kompilaatoriga, mis suudab malle kõrgel tasemel optimeerida. See kasutab ka virtuaalset DOM-i, sarnaselt Reactile.

Angular (v16)

Google'i Angular on pigem platvorm kui teek. See on kõikehõlmav, kindlate reeglitega raamistik, mis pakub valmislahendusi alates marsruutimisest kuni olekuhalduseni. Ajalooliselt tuntud suuremate pakettide poolest, on hiljutised versioonid Ivy kompilaatori, puu raputamise (tree-shaking) ning signaalide ja eraldiseisvate komponentide kasutuselevõtuga muutnud selle jõudluse osas palju konkurentsivõimelisemaks.

Svelte (v4)

Svelte läheneb asjale radikaalselt. See on kompilaator, mis töötab ehitamise ajal, teisendades teie Svelte'i komponendid kõrgelt optimeeritud imperatiivseks JavaScripti koodiks, mis manipuleerib otse DOM-iga. See tähendab, et teie tootmispaketis pole virtuaalset DOM-i ja peaaegu üldse mitte raamistikuspetsiifilist käitusaegset koodi. Filosoofia on töö nihutamine brauserist ehitusetappi.

SolidJS (v1.7)

SolidJS on sageli jõudlustabelite tipus ja kogub märkimisväärset populaarsust. See kasutab JSX-i, seega tundub see Reacti arendajatele tuttav, kuid see ei kasuta virtuaalset DOM-i. Selle asemel kasutab see peeneteralist reaktiivsussüsteemi, mis sarnaneb arvutustabeliga. Kui andmeüksus muutub, uuendatakse ainult täpselt neid DOM-i osi, mis sellest sõltuvad, ilma terveid komponendifunktsioone uuesti käivitamata. See tagab kirurgilise täpsuse ja uskumatu kiiruse.

Testrakendus: "Global Insight Dashboard"

Nende raamistike testimiseks ehitasime näidisrakenduse nimega "Global Insight Dashboard". See rakendus on loodud esindama paljusid andmepõhiseid äritööriistu. See sisaldab järgmisi funktsioone:

• Autentimine: näidis sisselogimise/väljalogimise voog.
• Töölaua avaleht: Kuvab mitu kokkuvõtvat kaarti ja diagrammi andmetega, mis on toodud näidis-API-st.
• Suure andmetabeli leht: leht, mis toob ja renderdab tabeli 1000 rea ja 10 veeruga.
• Interaktiivse tabeli funktsioonid: kliendipoolne sortimine, filtreerimine ja rea valimine.
• Detailvaade: kliendipoolne marsruutimine tabelis valitud rea detaillehele.
• Globaalne olek: jagatud olek autentitud kasutaja ja kasutajaliidese teema (hele/tume režiim) jaoks.

See seadistus võimaldab meil mõõta kõike alates esmasest laadimisest ja API andmete renderdamisest kuni keerukate kasutajaliidese interaktsioonide reageerimisvõimeni suure andmehulga puhul.

Metoodika: kuidas me jõudlust mõõtsime

Läbipaistvus ja järjepidevus on õiglase võrdluse jaoks esmatähtsad. Siin on meie testimise seadistus:

• Tööriistad: Google Lighthouse (käivitatud inkognito aknas) ja Chrome DevTools Performance profiiler.
• Keskkond: Kõik rakendused ehitati tootmiseks ja neid serveeriti lokaalselt.
• Testimistingimused: Reaalse mobiilikasutaja simuleerimiseks viidi kõik testid läbi 4x protsessori aeglustusega ja Fast 3G võrgu piiranguga. See hoiab ära tulemuste moonutamise tippklassi arendaja riistvara tõttu.
• Mõõdetud peamised näitajad:
  • Esialgne JS paketi suurus (gzipped): JavaScripti maht, mille brauser peab esmakülastusel alla laadima, parsima ja käivitama.
  • First Contentful Paint (FCP): Märgib aega, mil renderdatakse esimene DOM-i sisu osa.
  • Largest Contentful Paint (LCP): Mõõdab, millal renderdatakse suurim nähtav sisu element vaateaknas. Oluline Core Web Vital.
  • Time to Interactive (TTI): Aeg, mis kulub lehe täielikult interaktiivseks muutumiseks.
  • Total Blocking Time (TBT): Mõõdab kogu aega, mil peamine lõim oli blokeeritud, takistades kasutaja sisendit. On otseselt seotud uue INP (Interaction to Next Paint) Core Web Vitaliga.
  • Mälukasutus: hunniku suurus, mõõdetuna pärast esialgset laadimist ja pärast mitut interaktsiooni.

Tulemused: otsevõrdlus

Lahtiütlus: need tulemused põhinevad meie konkreetsel testrakendusel. Numbrid illustreerivad iga raamistiku jõudlusomadusi, kuid teie enda rakenduse arhitektuur võib anda erinevaid tulemusi.

1. voor: esmane laadimine ja paketi suurus

Uue kasutaja jaoks on esmamulje kõik. See voor keskendub sellele, kui kiiresti saab rakenduse alla laadida ja kasutatavasse olekusse renderdada.

• Svelte: Võitja. Vaid ~9 KB suuruse gzipped JS-paketiga oli Svelte selge liider. Selle FCP ja LCP skoorid olid silmapaistvad, kuna brauseril oli töötlemiseks väga vähe raamistiku koodi. Töölaud ilmus peaaegu koheselt.
• SolidJS: Napilt teine. Paketi suurus oli veidi suurem, ~12 KB. Jõudlus oli peaaegu identne Svelte'iga, pakkudes äärmiselt kiiret esialgset laadimiskogemust.
• Vue: Tugev sooritus. Vue pakett oli soliidne ~35 KB. Selle kompilaatori optimeerimised paistsid silma, pakkudes kiiret LCP-d ja TTI-d, mis oli väga konkurentsivõimeline.
• React: Keskmike seas. `react` ja `react-dom` kombinatsioon andis tulemuseks ~48 KB suuruse paketi. Kuigi see pole sugugi aeglane, oli TTI märgatavalt pikem kui liidritel, mis tulenes VDOM-i ehitamise ja rakenduse hüdreerimise tööst.
• Angular: Parem, kuid siiski suurim. Angulari pakett oli suurim, ~65 KB. Kuigi see on tohutu edasiminek võrreldes vanemate versioonidega, oli esialgne parsimise ja käivitamise kulu endiselt kõrgeim, mis viis selle testi aeglaseima FCP ja LCP-ni.

Tähelepanek: Projektide puhul, kus esmane laadimisaeg on absoluutselt kriitiline (nt e-kaubanduse sihtlehed, turundussaidid), on kompilaatoripõhistel raamistikel nagu Svelte ja Solid selge, mõõdetav eelis tänu nende minimaalsele käitusaja jalajäljele.

2. voor: käitusaja ja interaktsiooni jõudlus

Kui rakendus on laaditud, siis kuidas seda kasutada on? Testisime seda, tehes intensiivseid toiminguid meie 1000-realises andmetabelis: veeru järgi sortimine ja tekstifiltri rakendamine, mis otsis kõikidest lahtritest.

• SolidJS: Võitja. Solidi jõudlus oli siin fenomenaalne. Sortimine ja filtreerimine tundusid hetkelised. Selle peeneteraline reaktiivsus tähendas, et puudutati ainult neid DOM-i sõlmi, mis vajasid muutmist. TBT oli uskumatult madal, mis viitab mitteblokeerivale kasutajaliidesele isegi suure arvutuskoormuse ajal.
• Svelte: Suurepärane jõudlus. Svelte oli kohe Solidi kannul. Selle kompileeritud, otsesed DOM-i manipulatsioonid osutusid äärmiselt tõhusaks. Kasutajakogemus oli sujuv ja reageeriv, väga väikese TBT-ga.
• Vue: Väga hea jõudlus. Vue reaktiivsussüsteem käsitles uuendusi tõhusalt. Filtreerimisel oli väga väike, peaaegu märkamatu viivitus võrreldes Solidi ja Svelte'iga, kuid üldine kogemus oli suurepärane ja rahuldaks enamikku kasutusjuhtudest.
• React: Hea, kuid nõuab optimeerimist. Vaikimisi näitas Reacti implementatsioon suure tabeli filtreerimisel märgatavat viivitust. Peamine lõim oli lühikeseks ajaks blokeeritud, kuna 1000-realise komponendi uuesti renderdamine oli kulukas. See oli lahendatav, rakendades käsitsi optimeerimisi nagu `React.memo` reakomponentidele ja `useMemo` filtreerimisloogikale. Optimeerimisega muutus jõudlus heaks, kuid see nõudis arendajalt lisapingutust.
• Angular: Hea, kuid nüanssidega. Angulari vaikimisi muudatuste tuvastamise mehhanismil oli samuti filtreerimisülesandega veidi raskusi, sarnaselt Reactile. Kuid tabelikomponendi viimine `OnPush` muudatuste tuvastamise strateegiale parandas jõudlust oluliselt, muutes selle väga reageerivaks. Uus signaalide funktsioon Angularis tooks selle tõenäoliselt liidritega samale tasemele.

Tähelepanek: Väga interaktiivsete, andmemahukate rakenduste jaoks pakuvad Solidi ja Svelte'i arhitektuurid vaikimisi parimat jõudlust. VDOM-põhised teegid nagu React ja Vue on täiesti võimekad, kuid võivad nõuda arendajatelt suuremat teadlikkust jõudluse optimeerimise tehnikatest, kui keerukus kasvab.

3. voor: mälukasutus

Kuigi tänapäevastel lauaarvutitel on see vähem muret tekitav, on mälukasutus endiselt kriitiline odavamate mobiilseadmete ja pikaajaliste rakenduste jaoks, et vältida uimasust ja kokkujooksmisi.

• Svelte & SolidJS: Jagasid esikohta madalaima mälujalajäljega. Ilma VDOM-ita mälus ja minimaalse käitusajaga olid need kerged ja tõhusad.
• Vue: Tarbis veidi rohkem mälu kui liidrid, mis on tingitud selle VDOM-ist ja reaktiivsussüsteemist, kuid jäi siiski väga tõhusaks.
• React: Oli suurema mälujalajäljega VDOM-i ja fiber-arhitektuuri lisakoormuse tõttu.
• Angular: Registreeris suurima mälukasutuse, mis on tingitud selle kõikehõlmavast raamistiku struktuurist ja Zone.js-ist muudatuste tuvastamiseks.

Tähelepanek: Rakenduste puhul, mis on suunatud piiratud ressurssidega seadmetele või mõeldud olema avatud väga pikkadeks seanssideks, võib Svelte'i ja Solidi väiksem mälukoormus olla oluline eelis.

Numbrite taga: kvalitatiivsed tegurid

Jõudlustestid räägivad loo olulise, kuid mitte kogu osa. Raamistiku valik sõltub ka suuresti teie meeskonnast, projekti ulatusest ja pikaajalistest eesmärkidest.

Arendajakogemus (DX) ja õppimiskõver

• Vue ja Svelte saavad sageli kiita kõige meeldivama arendajakogemuse ja laugema õppimiskõvera eest. Nende süntaks on intuitiivne ja dokumentatsioon on tipptasemel.
• Reacti JSX ja hook-põhine mudel on võimsad, kuid neil võib olla järsem õppimiskõver, eriti selliste mõistete puhul nagu memoiseerimine ja efektide sõltuvused.
• SolidJS on Reacti arendajatele süntaktiliselt lihtne omandada, kuid nõuab mõttemudeli muutust, et mõista selle peeneteralist reaktiivsust.
• Angulari kindlate reeglitega olemus ning sõltuvus TypeScriptist ja mõistetest nagu sõltuvuste süstimine (dependency injection) kujutavad endast kõige järsemat õppimiskõverat, kuid see struktuur võib suurtes meeskondades tagada järjepidevuse.

Ökosüsteem ja kogukonna tugi

• React on siin vaieldamatu liider. Praktiliselt iga probleemi jaoks leiate teegi, tööriista või õpetuse. See tohutu ülemaailmne kogukond pakub uskumatut turvavõrku.
• Vue ja Angular omavad samuti väga suuri ja küpseid ökosüsteeme, millel on tugev ettevõtete toetus ning rikkalikult teeke ja kogukonna ressursse.
• Svelte ja SolidJS omavad väiksemaid, kuid kiiresti kasvavaid ökosüsteeme. Kuigi te ei pruugi leida valmiskomponenti iga nišikasutusjuhtumi jaoks, on nende kogukonnad kirglikud ja väga aktiivsed.

Kokkuvõte: milline raamistik sobib teile?

Pärast andmete analüüsimist ja kvalitatiivsete tegurite arvessevõtmist on selge, et ühtainsat „parimat“ raamistikku ei ole olemas. Optimaalne valik sõltub täielikult teie projekti prioriteetidest.

Siin on meie lõplik soovitus erinevate stsenaariumide põhjal:

• Absoluutse tippjõudluse ja kergete ehituste jaoks: Valige Svelte või SolidJS. Kui teie peamine eesmärk on võimalikult kiired laadimisajad, kõige reageerivam kasutajaliides ja võimalikult väike paketi suurus (nt e-kaubanduse saidid, mobiilipõhised veebirakendused, interaktiivsed visualiseerimised), on need raamistikud omaette klassis. SolidJS-il on eelis keeruka, reaktiivse andmetöötluse osas, samas kui Svelte pakub veidi lihtsamat ja maagilisemat arendajakogemust.
• Massiivse ökosüsteemi ja tööjõu kättesaadavuse jaoks: Valige React. Kui teie projekt vajab juurdepääsu kõige laiemale valikule teekidele, tööriistadele ja arendajatele, on React kõige turvalisem ja pragmaatilisem valik. Selle jõudlus on väga hea ja selle domineerimine tööturul teeb arendusmeeskonna skaleerimise lihtsamaks kõikjal maailmas.
• Jõudluse ja ligipääsetavuse tasakaalu jaoks: Valige Vue. Vue tabab ideaalset tasakaalupunkti. See pakub suurepärast jõudlust, mis on Reactiga konkurentsivõimeline, kuid arendajakogemusega, mida paljud peavad intuitiivsemaks ja lihtsamini õpitavaks. See on fantastiline universaalne lahendus nii väikeste kui ka suurte rakenduste jaoks.
• Suuremahuliste, ettevõtte tasemel rakenduste jaoks: Valige Angular. Kui ehitate keerukat, pikaealist rakendust suure arendajate meeskonnaga, võib Angulari struktureeritud ja kindlate reeglitega olemus olla tohutu eelis. See tagab järjepidevuse ja pakub robustset, kõikehõlmavat platvormi, mis suudab toime tulla ettevõtte tasemel keerukusega, ning selle jõudlus paraneb pidevalt.

JavaScripti raamistike maailm areneb kiiremini kui kunagi varem. Kompilaatorite esiletõus ja väljakutsujate nagu Svelte ja SolidJS eemaldumine virtuaalsest DOM-ist lükkavad kogu ökosüsteemi edasi. Lõppkokkuvõttes on „raamistike sõjad“ hea asi – need viivad innovatsiooni, parema jõudluse ja võimsamate tööriistadeni, millega arendajad saavad ehitada järgmise põlvkonna veebikogemusi. Valige tööriist, mis sobib kõige paremini teie projekti ainulaadsete piirangute ja eesmärkidega, ning oletegi teel edu poole.