JavaScript karkasų našumo palyginimas: realaus pasaulio etaloniniai testai modernioms programoms

Dinamiškame žiniatinklio kūrimo pasaulyje nuolat vyksta diskusijos, kuris JavaScript karkasas yra „geriausias“. Kūrėjai dažnai gina savo favoritus, remdamiesi kūrėjo patirtimi, ekosistemos dydžiu ar mokymosi kreive. Tačiau galutiniams vartotojams ir verslui vienas rodiklis dažnai iškyla aukščiau visų kitų: našumas. Greita, jautriai reaguojanti programa gali nulemti skirtumą tarp konversijos ir atmetimo, tarp vartotojo džiaugsmo ir nusivylimo.

Nors sintetiniai etaloniniai testai, tokie kaip TodoMVC, turi savo vietą, jie dažnai neatskleidžia modernios žiniatinklio programos sudėtingumo. Jie testuoja izoliuotas funkcijas vakuume – scenarijus, retai pasitaikantis realioje aplinkoje. Šiame straipsnyje laikomasi kitokio požiūrio. Mes gilinamės į realaus pasaulio programos etaloninį testą, lygindami front-end pasaulio titanus – React, Vue ir Angular – kartu su naujos kartos varžovais, Svelte ir SolidJS. Mūsų tikslas – peržengti teorinius argumentus ir pateikti apčiuopiamus duomenis, kurie padėtų jums priimti pagrįstą sprendimą kitam projektui.

Kodėl realaus pasaulio etaloniniai testai yra svarbūs

Prieš pateikdami duomenis, svarbu suprasti skirtumą tarp sintetinių ir realaus pasaulio etaloninių testų. Sintetiniai testai dažnai sutelkia dėmesį į vieną, pasikartojančią užduotį, pavyzdžiui, 1000 darbų sąrašo elementų sukūrimą ir sunaikinimą. Tai puikiai tinka karkaso atvaizdavimo variklio testavimui esant apkrovai, bet mažai pasako apie:

• Pradinės įkrovos našumas: Kaip greitai programa tampa naudojama pirmą kartą apsilankiusiam vartotojui per mobilųjį tinklą? Tai apima paketo dydį, analizės (parsing) laiką ir hidratavimo strategiją.
• Sudėtingas būsenos valdymas: Kaip karkasas tvarko sąveikas tarp kelių, nesusijusių komponentų, kurie dalijasi globalia būsena?
• API delsos integravimas: Koks programos pojūtis, kai ji turi gauti duomenis, rodyti įkrovimo būsenas ir tada atvaizduoti rezultatus?
• Maršruto parinkimo (routing) našumas: Kaip greitai ir sklandžiai vartotojas gali naršyti tarp skirtingų puslapių ar rodinių vieno puslapio programoje (SPA)?

Realaus pasaulio etaloninis testas bando imituoti šiuos scenarijus. Sukurdami identišką, vidutinio sudėtingumo programą kiekviename karkase, galime išmatuoti našumo metrikas, kurios tiesiogiai veikia vartotojo patirtį, o kartu – ir verslo tikslus. Šios metrikos yra glaudžiai susijusios su Google „Core Web Vitals“ (CWV) – veiksnių rinkiniu, kuris dabar yra paieškos reitingavimo algoritmo dalis. Trumpai tariant, našumas yra ne tik techninis, bet ir SEO bei verslo imperatyvas.

Dalyviai: trumpa apžvalga

Pasirinkome penkis iškiliausius ir įdomiausius karkasus šiandieninėje ekosistemoje. Kiekvienas iš jų turi skirtingą filosofiją ir architektūrą, kuri tiesiogiai veikia jo našumo charakteristikas.

React (v18)

Sukurtas ir prižiūrimas „Meta“, React yra neginčijamas rinkos lyderis. Jis išpopuliarino komponentais pagrįstą architektūrą ir virtualųjį DOM (VDOM). VDOM veikia kaip realaus DOM atvaizdas atmintyje, leidžiantis React efektyviai grupuoti atnaujinimus. Dėl didžiulės ekosistemos ir talentų fondo jis yra numatytasis pasirinkimas daugeliui įmonių visame pasaulyje.

Vue (v3)

Vue dažnai apibūdinamas kaip progresyvus karkasas. Jis žinomas dėl prieinamos mokymosi kreivės, puikios dokumentacijos ir lankstumo. Vue 3 atnešė reikšmingų našumo patobulinimų su nauja reaktyvumo sistema, sukurta remiantis JavaScript „Proxies“, ir kompiliatoriumi, kuris gali smarkiai optimizuoti šablonus. Jis taip pat naudoja virtualųjį DOM, panašiai kaip React.

Angular (v16)

Google sukurtas Angular yra labiau platforma nei biblioteka. Tai išsamus, tvirtą nuomonę turintis (opinionated) karkasas, kuris iš karto siūlo sprendimus viskam – nuo maršruto parinkimo iki būsenos valdymo. Nors istoriškai žinomas dėl didesnių paketų dydžių, naujausios versijos su „Ivy“ kompiliatoriumi, „tree-shaking“ funkcija ir signalų bei savarankiškų komponentų įdiegimu padarė jį daug konkurencingesnį našumo atžvilgiu.

Svelte (v4)

Svelte laikosi radikalaus požiūrio. Tai kompiliatorius, kuris veikia kūrimo (build) metu, konvertuodamas jūsų Svelte komponentus į itin optimizuotą, imperatyvų JavaScript kodą, kuris tiesiogiai manipuliuoja DOM. Tai reiškia, kad gamybinėje versijoje nėra virtualaus DOM ir beveik jokio specifinio karkaso vykdymo laiko (runtime) kodo. Filosofija yra perkelti darbą iš naršyklės į kūrimo etapą.

SolidJS (v1.7)

SolidJS dažnai atsiduria našumo lentelių viršuje ir sparčiai populiarėja. Jis naudoja JSX, todėl React kūrėjams atrodo pažįstamas, tačiau jis nenaudoja virtualaus DOM. Vietoj to, jis naudoja smulkiagrūdę (fine-grained) reaktyvumo sistemą, panašią į skaičiuoklę. Kai duomenų dalis pasikeičia, atnaujinamos tik tos DOM dalys, kurios nuo jos priklauso, neperkuriant visų komponentų funkcijų. Tai užtikrina chirurginį tikslumą ir neįtikėtiną greitį.

Etaloninė programa: „Global Insight Dashboard“

Norėdami išbandyti šiuos karkasus, sukūrėme pavyzdinę programą, pavadintą „Global Insight Dashboard“. Ši programa sukurta taip, kad atspindėtų daugelį duomenimis pagrįstų verslo įrankių. Ji apima šias funkcijas:

• Autentifikacija: imituojamas prisijungimo / atsijungimo procesas.
• Valdymo skydelio pagrindinis puslapis: rodomos kelios suvestinių kortelės ir diagramos su duomenimis, gautais iš imituotos API.
• Didelės duomenų lentelės puslapis: puslapis, kuris gauna ir atvaizduoja lentelę su 1000 eilučių ir 10 stulpelių duomenų.
• Interaktyvios lentelės funkcijos: kliento pusės rūšiavimas, filtravimas ir eilučių pasirinkimas.
• Išsamios informacijos rodinys: kliento pusės maršruto parinkimas į išsamios informacijos puslapį, skirtą pasirinktai eilutei lentelėje.
• Globali būsena: bendrinama būsena autentifikuotam vartotojui ir vartotojo sąsajos temai (šviesus/tamsus režimas).

Ši sąranka leidžia mums išmatuoti viską – nuo pradinio įkrovimo ir API duomenų atvaizdavimo iki sudėtingų vartotojo sąsajos sąveikų su dideliu duomenų rinkiniu reakcijos greičio.

Metodika: kaip matavome našumą

Skaidrumas ir nuoseklumas yra būtini sąžiningam palyginimui. Štai mūsų testavimo sąranka:

• Įrankiai: Google Lighthouse (vykdoma inkognito lange) ir Chrome DevTools našumo profiliuotojas.
• Aplinka: visos programos buvo sukurtos gamybinei versijai (production) ir pateikiamos lokaliai.
• Testavimo sąlygos: siekiant imituoti realų mobiliojo ryšio vartotoją, visi testai buvo atlikti su 4x procesoriaus sulėtinimu ir „Fast 3G“ tinklo greičio ribojimu. Tai apsaugo nuo rezultatų iškraipymo dėl aukštos klasės kūrėjų techninės įrangos.
• Pagrindinės matuotos metrikos:
  • Pradinis JS paketo dydis (gzipped): JavaScript kiekis, kurį naršyklė turi atsisiųsti, išanalizuoti ir įvykdyti pirmojo apsilankymo metu.
  • First Contentful Paint (FCP): žymi laiką, kada atvaizduojamas pirmasis DOM turinio elementas.
  • Largest Contentful Paint (LCP): matuoja, kada atvaizduojamas didžiausias matomas turinio elementas peržiūros srityje. Pagrindinis „Core Web Vital“ rodiklis.
  • Time to Interactive (TTI): laikas, per kurį puslapis tampa visiškai interaktyvus.
  • Total Blocking Time (TBT): matuoja bendrą laiką, per kurį pagrindinė gija buvo užblokuota, neleidžiant vartotojui atlikti veiksmų. Tiesiogiai koreliuoja su naujuoju INP (Interaction to Next Paint) „Core Web Vital“ rodikliu.
  • Atminties naudojimas: dinaminės atminties (heap) dydis, išmatuotas po pradinio įkrovimo ir po kelių sąveikų.

Rezultatai: tiesioginis palyginimas

Atsakomybės apribojimas: šie rezultatai pagrįsti mūsų konkrečia etalonine programa. Skaičiai iliustruoja kiekvieno karkaso našumo charakteristikas, tačiau jūsų pačių programos architektūra gali duoti skirtingus rezultatus.

1 raundas: pradinis įkrovimas ir paketo dydis

Naujam vartotojui pirmasis įspūdis yra viskas. Šis raundas sutelktas į tai, kaip greitai programa gali būti atsiųsta ir atvaizduota iki naudojamos būsenos.

• Svelte: Nugalėtojas. Su vos ~9 KB gzipped JS paketu Svelte buvo aiškus lyderis. Jo FCP ir LCP rodikliai buvo išskirtiniai, nes naršyklė turėjo apdoroti labai mažai karkaso kodo. Valdymo skydelis pasirodė beveik akimirksniu.
• SolidJS: Antras, bet labai arti. Paketo dydis buvo šiek tiek didesnis – ~12 KB. Našumas buvo beveik identiškas Svelte, užtikrinantis itin greitą pradinio įkrovimo patirtį.
• Vue: Stiprus dalyvis. Vue paketas buvo respektabilaus dydžio – ~35 KB. Jo kompiliatoriaus optimizacijos pasiteisino, užtikrindamos greitą LCP ir TTI, kurie buvo labai konkurencingi.
• React: Vidutiniokas. `react` ir `react-dom` derinys sudarė ~48 KB paketą. Nors jokiu būdu ne lėtas, TTI buvo pastebimai ilgesnis nei lyderių dėl VDOM kūrimo ir programos hidratavimo darbo.
• Angular: Patobulintas, bet vis dar didžiausias. Angular paketas buvo didžiausias – ~65 KB. Nors tai yra didžiulis patobulinimas, palyginti su senesnėmis versijomis, pradinės analizės (parsing) ir paleidimo (bootstrapping) kaina vis dar buvo didžiausia, todėl šiame teste FCP ir LCP buvo lėčiausi.

Įžvalga: Projektams, kuriuose pradinis įkrovimo laikas yra absoliučiai kritinis (pvz., el. prekybos nukreipimo puslapiai, rinkodaros svetainės), kompiliatoriais pagrįsti karkasai, tokie kaip Svelte ir Solid, turi aiškų, išmatuojamą pranašumą dėl minimalaus vykdymo laiko (runtime) kodo.

2 raundas: vykdymo laiko ir sąveikos našumas

Kai programa įkelta, koks jausmas ja naudotis? Tai išbandėme atlikdami intensyvias operacijas su mūsų 1000 eilučių duomenų lentele: rūšiuodami pagal stulpelį ir taikydami teksto filtrą, kuris ieškojo visuose langeliuose.

• SolidJS: Nugalėtojas. Solid našumas čia buvo fenomenalus. Rūšiavimas ir filtravimas atrodė momentiniai. Jo smulkiagrūdis reaktyvumas reiškė, kad buvo paliesti tik tie DOM mazgai, kuriuos reikėjo pakeisti. TBT buvo neįtikėtinai žemas, rodantis neblokuojančią vartotojo sąsają net ir atliekant sudėtingus skaičiavimus.
• Svelte: Puikus našumas. Svelte buvo visai šalia Solid. Jo sukompiliuotos, tiesioginės DOM manipuliacijos pasirodė esančios itin efektyvios. Vartotojo patirtis buvo sklandi ir jautri, su labai mažu TBT.
• Vue: Labai geras našumas. Vue reaktyvumo sistema efektyviai susidorojo su atnaujinimais. Filtruojant buvo juntamas labai nežymus, beveik nepastebimas vėlavimas, palyginti su Solid ir Svelte, tačiau bendra patirtis buvo puiki ir patenkintų didžiąją daugumą naudojimo atvejų.
• React: Geras, bet reikalauja optimizavimo. Iš karto po įdiegimo React implementacija parodė pastebimą atsilikimą filtruojant didelę lentelę. Pagrindinė gija buvo trumpam užblokuota, nes 1000 eilučių komponento pervaizdavimas buvo brangus. Tai buvo išsprendžiama rankiniu būdu pritaikant optimizacijas, tokias kaip `React.memo` eilutės komponentams ir `useMemo` filtravimo logikai. Su optimizavimu našumas tapo geras, tačiau tai pareikalavo papildomų kūrėjo pastangų.
• Angular: Geras, su niuansais. Angular numatytoji pakeitimų aptikimo (change detection) mechanizmas taip pat šiek tiek sunkiai susidorojo su filtravimo užduotimi, panašiai kaip React. Tačiau perkėlus lentelės komponentą naudoti `OnPush` pakeitimų aptikimo strategiją, našumas žymiai pagerėjo, todėl jis tapo labai jautrus. Naujoji signalų funkcija Angular'e tikriausiai prilygintų jį lyderiams.

Įžvalga: Labai interaktyvioms, daug duomenų naudojančioms programoms Solid ir Svelte architektūros suteikia geriausią našumą be papildomų pastangų. VDOM pagrįstos bibliotekos, tokios kaip React ir Vue, yra visiškai pajėgios, tačiau gali reikalauti, kad kūrėjai, didėjant sudėtingumui, labiau atsižvelgtų į našumo optimizavimo technikas.

3 raundas: atminties naudojimas

Nors šiuolaikiniuose stacionariuose kompiuteriuose tai kelia mažiau rūpesčių, atminties naudojimas vis dar yra kritiškai svarbus prastesnių parametrų mobiliesiems įrenginiams ir ilgai veikiančioms programoms, siekiant išvengti lėtumo ir strigimų.

• Svelte & SolidJS: Pasidalino pirmąją vietą su mažiausiu atminties pėdsaku. Be VDOM atmintyje ir su minimaliu vykdymo laiko (runtime) kodu, jie buvo taupūs ir efektyvūs.
• Vue: Sunaudojo šiek tiek daugiau atminties nei lyderiai, kas priskiriama jo VDOM ir reaktyvumo sistemai, tačiau išliko labai efektyvus.
• React: Turėjo didesnį atminties pėdsaką dėl VDOM ir „fiber“ architektūros pridėtinių išlaidų.
• Angular: Užfiksavo didžiausią atminties naudojimą – tai jo išsamios karkaso struktūros ir Zone.js, skirto pakeitimų aptikimui, pasekmė.

Įžvalga: Programoms, skirtoms ribotų išteklių įrenginiams arba skirtoms veikti labai ilgas sesijas, mažesnės Svelte ir Solid atminties sąnaudos gali būti reikšmingas pranašumas.

Ne tik skaičiai: kokybiniai veiksniai

Našumo etaloniniai testai pasakoja svarbią istorijos dalį, bet ne visą. Karkaso pasirinkimas taip pat labai priklauso nuo jūsų komandos, projekto apimties ir ilgalaikių tikslų.

Kūrėjo patirtis (DX) ir mokymosi kreivė

• Vue ir Svelte dažnai giriami už maloniausią kūrėjo patirtį (DX) ir lėkščiausias mokymosi kreives. Jų sintaksė yra intuityvi, o dokumentacija – aukščiausio lygio.
• React JSX ir „hook'ais“ pagrįstas modelis yra galingas, tačiau gali turėti statesnę mokymosi kreivę, ypač kalbant apie tokias sąvokas kaip memoizacija ir efektų priklausomybės.
• SolidJS sintaksiškai yra lengvai perprantamas React kūrėjams, tačiau reikalauja mentalinio modelio pokyčio, kad būtų galima suprasti jo smulkiagrūdį reaktyvumą.
• Angular tvirtą nuomonę turinti (opinionated) prigimtis ir priklausomybė nuo TypeScript bei tokių koncepcijų kaip priklausomybių įterpimas (dependency injection) lemia statesnę mokymosi kreivę, tačiau ši struktūra gali užtikrinti nuoseklumą didelėse komandose.

Ekosistema ir bendruomenės palaikymas

• React čia yra nepralenkiamas lyderis. Galite rasti biblioteką, įrankį ar pamoką praktiškai bet kokiai problemai, su kuria galite susidurti. Ši didžiulė pasaulinė bendruomenė suteikia neįtikėtiną saugumo tinklą.
• Vue ir Angular taip pat turi labai dideles, brandžias ekosistemas su stipriu korporatyviniu palaikymu ir daugybe bibliotekų bei bendruomenės išteklių.
• Svelte ir SolidJS turi mažesnes, bet sparčiai augančias ekosistemas. Nors galbūt nerasite paruošto komponento kiekvienam nišiniam atvejui, jų bendruomenės yra aistringos ir labai aktyvios.

Išvada: kuris karkasas tinka jums?

Išanalizavus duomenis ir atsižvelgus į kokybinius veiksnius, akivaizdu, kad vieno „geriausio“ karkaso nėra. Optimalus pasirinkimas visiškai priklauso nuo jūsų projekto prioritetų.

Štai mūsų galutinė rekomendacija, pagrįsta skirtingais scenarijais:

• Absoliučiam našumo maksimumui ir taupiems paketams: rinkitės Svelte arba SolidJS. Jei jūsų pagrindinis tikslas yra kuo greitesnis įkrovimo laikas, jautriausia vartotojo sąsaja ir mažiausias įmanomas paketo dydis (pvz., el. prekybos svetainės, mobiliosioms programoms pritaikytos svetainės, interaktyvios vizualizacijos), šie karkasai yra atskiroje klasėje. SolidJS turi pranašumą sudėtingų, reaktyvių duomenų manipuliavime, o Svelte siūlo šiek tiek paprastesnę, „magiškesnę“ kūrėjo patirtį.
• Didžiulei ekosistemai ir darbuotojų paieškai: rinkitės React. Jei jūsų projektui reikalinga prieiga prie plačiausio bibliotekų, įrankių ir kūrėjų spektro, React yra saugiausias ir pragmatiškiausias pasirinkimas. Jo našumas yra labai geras, o dominavimas darbo rinkoje leidžia lengviau plėsti kūrėjų komandą bet kurioje pasaulio vietoje.
• Našumo ir prieinamumo balansui: rinkitės Vue. Vue pasiekia aukso vidurį. Jis siūlo puikų našumą, konkurencingą su React, tačiau su kūrėjo patirtimi, kurią daugelis laiko intuityvesne ir lengviau išmokstama. Tai fantastiškas universalus pasirinkimas nuo mažų iki didelių programų.
• Didelio masto, įmonių lygio programoms: rinkitės Angular. Jei kuriate sudėtingą, ilgalaikę programą su didele kūrėjų komanda, struktūrizuota ir tvirtą nuomonę turinti Angular prigimtis gali būti didžiulis privalumas. Ji užtikrina nuoseklumą ir suteikia tvirtą, visapusišką platformą, galinčią susidoroti su įmonės lygio sudėtingumu, o jos našumas nuolat gerėja.

JavaScript karkasų pasaulis vystosi greičiau nei bet kada anksčiau. Kompiliatorių iškilimas ir atsitraukimas nuo virtualaus DOM, kurį demonstruoja tokie varžovai kaip Svelte ir SolidJS, stumia visą ekosistemą į priekį. Galiausiai, „karkasų karai“ yra geras dalykas – jie skatina inovacijas, geresnį našumą ir galingesnius įrankius kūrėjams, kad jie galėtų kurti naujos kartos žiniatinklio patirtis. Pasirinkite įrankį, kuris geriausiai atitinka jūsų projekto unikalius apribojimus ir tikslus, ir jūs būsite pakeliui į sėkmę.