JavaScript ietvaru veiktspējas cīņa: reālās pasaules etalonuzdevumi modernām lietojumprogrammām

Dinamiskajā tīmekļa izstrādes pasaulē debates par to, kurš JavaScript ietvars ir "labākais", ir nemitīgas. Izstrādātāji bieži aizstāv savus favorītus, atsaucoties uz izstrādātāja pieredzi, ekosistēmas lielumu vai mācīšanās līkni. Tomēr gala lietotājiem un uzņēmumiem viens rādītājs bieži vien ir svarīgāks par pārējiem: veiktspēja. Ātra, atsaucīga lietojumprogramma var būt atšķirība starp konversiju un atteikumu, starp lietotāja prieku un lietotāja vilšanos.

Lai gan sintētiskiem etalontestiem, piemēram, TodoMVC, ir sava vieta, tie bieži nespēj atspoguļot modernas tīmekļa lietojumprogrammas sarežģītību. Tie testē izolētas funkcijas vakuumā – scenārijs, kas reti sastopams produkcijā. Šis raksts izmanto citu pieeju. Mēs iedziļināmies reālas pasaules lietojumprogrammas etalontestā, salīdzinot front-end pasaules titānus – React, Vue un Angular – līdzās jaunās paaudzes izaicinātājiem Svelte un SolidJS. Mūsu mērķis ir pārsniegt teorētiskus argumentus un sniegt konkrētus datus, lai palīdzētu jums pieņemt pamatotu lēmumu nākamajam projektam.

Kāpēc reālās pasaules etalonuzdevumi ir svarīgi

Pirms mēs iepazīstinām ar datiem, ir svarīgi saprast atšķirību starp sintētiskiem un reālās pasaules etalontestiem. Sintētiskie testi bieži koncentrējas uz vienu, atkārtotu uzdevumu, piemēram, izveidojot un iznīcinot 1000 uzdevumu saraksta vienumus. Tas ir lieliski, lai pārbaudītu ietvara renderēšanas dzinēja slodzes noturību, bet maz stāsta par:

• Sākotnējās ielādes veiktspēja: Cik ātri lietojumprogramma kļūst lietojama pirmreizējam apmeklētājam mobilajā tīklā? Tas ietver pakotnes izmēru, parsēšanas laiku un hidratācijas stratēģiju.
• Sarežģīta stāvokļa pārvaldība: Kā ietvars tiek galā ar mijiedarbību starp vairākiem, nesaistītiem komponentiem, kuriem ir kopīgs globālais stāvoklis?
• API latentuma integrācija: Kāda ir lietojumprogrammas sajūta, kad tai ir jāiegūst dati, jāparāda ielādes stāvokļi un pēc tam jārenderē rezultāti?
• Maršrutēšanas veiktspēja: Cik ātri un plūdeni lietotājs var pārvietoties starp dažādām lapām vai skatiem vienas lapas lietojumprogrammā (SPA)?

Reālās pasaules etalontests mēģina simulēt šos scenārijus. Izveidojot identisku, vidēji sarežģītu lietojumprogrammu katrā ietvarā, mēs varam izmērīt veiktspējas rādītājus, kas tieši ietekmē lietotāja pieredzi un, līdz ar to, biznesa mērķus. Šie rādītāji ir cieši saistīti ar Google Core Web Vitals (CWV) – faktoru kopumu, kas tagad ir daļa no tā meklēšanas ranžēšanas algoritma. Īsāk sakot, veiktspēja nav tikai tehnisks jautājums; tas ir SEO un biznesa imperatīvs.

Pretendenti: īss pārskats

Mēs esam izvēlējušies piecus no šodienas ekosistēmas visievērojamākajiem un interesantākajiem ietvariem. Katram ir atšķirīga filozofija un arhitektūra, kas tieši ietekmē tā veiktspējas raksturlielumus.

React (v18)

Izstrādājis un uztur Meta, React ir neapstrīdams tirgus līderis. Tas popularizēja uz komponentiem balstītu arhitektūru un Virtuālo DOM (VDOM). VDOM darbojas kā reālā DOM attēlojums atmiņā, ļaujot React efektīvi apkopot atjauninājumus. Tā milzīgā ekosistēma un talantu fonds padara to par noklusējuma izvēli daudziem uzņēmumiem visā pasaulē.

Vue (v3)

Vue bieži tiek raksturots kā progresīvs ietvars. Tas ir pazīstams ar savu pieejamo mācīšanās līkni, lielisko dokumentāciju un elastību. Vue 3 ieviesa būtiskus veiktspējas uzlabojumus ar jaunu reaktivitātes sistēmu, kas balstīta uz JavaScript Proxies, un kompilatoru, kas var augsti optimizēt veidnes. Tas arī izmanto Virtuālo DOM, līdzīgi kā React.

Angular (v16)

Google izstrādātais Angular ir vairāk platforma nekā bibliotēka. Tas ir visaptverošs, noteiktu viedokli uzspiedošs ietvars, kas nodrošina risinājumus visam, sākot no maršrutēšanas līdz stāvokļa pārvaldībai. Vēsturiski pazīstams ar lielākiem pakotņu izmēriem, jaunākās versijas ar Ivy kompilatoru, "tree-shaking" un signālu un autonomo komponentu ieviešanu ir padarījušas to daudz konkurētspējīgāku veiktspējas ziņā.

Svelte (v4)

Svelte izmanto radikālu pieeju. Tas ir kompilators, kas darbojas būvēšanas laikā, pārveidojot jūsu Svelte komponentus augsti optimizētā, imperatīvā JavaScript kodā, kas tieši manipulē ar DOM. Tas nozīmē, ka jūsu produkcijas pakotnē nav Virtuālā DOM un gandrīz nekāda ietvara specifiska izpildlaika koda. Filozofija ir pārcelt darbu no pārlūkprogrammas uz būvēšanas soli.

SolidJS (v1.7)

SolidJS bieži ieņem augstākās vietas veiktspējas topos un gūst ievērojamu popularitāti. Tas izmanto JSX, tāpēc React izstrādātājiem tas šķiet pazīstams, bet tas neizmanto Virtuālo DOM. Tā vietā tas izmanto smalki granulētu reaktivitātes sistēmu, līdzīgi kā izklājlapa. Kad datu daļa mainās, tiek atjauninātas tikai tās DOM daļas, kas no tās ir atkarīgas, nepārstartējot visas komponenta funkcijas. Tas nodrošina ķirurģisku precizitāti un neticamu ātrumu.

Etalonuzdevuma lietojumprogramma: "Globālo ieskatu panelis"

Lai pārbaudītu šos ietvarus, mēs izveidojām parauga lietojumprogrammu ar nosaukumu "Globālo ieskatu panelis". Šī lietojumprogramma ir izstrādāta, lai pārstāvētu daudzus uz datiem balstītus biznesa rīkus. Tā ietver šādas funkcijas:

• Autentifikācija: Viltota pieteikšanās/izrakstīšanās plūsma.
• Paneļa sākumlapa: Parāda vairākas kopsavilkuma kartītes un diagrammas ar datiem, kas iegūti no viltota API.
• Liela datu tabulas lapa: Lapa, kas iegūst un renderē tabulu ar 1000 rindām un 10 kolonnām datu.
• Interaktīvas tabulas funkcijas: Klienta puses kārtošana, filtrēšana un rindu atlase.
• Detaļu skats: Klienta puses maršrutēšana uz detalizētu lapu atlasītajai rindai tabulā.
• Globālais stāvoklis: Koplietots stāvoklis autentificētam lietotājam un lietotāja saskarnes tēmai (gaišais/tumšais režīms).

Šī iestatīšana ļauj mums izmērīt visu, sākot no sākotnējās ielādes un API datu renderēšanas līdz sarežģītu lietotāja saskarnes mijiedarbību atsaucībai ar lielu datu kopu.

Metodoloģija: kā mēs mērījām veiktspēju

Godīgam salīdzinājumam caurspīdīgums un konsekvence ir vissvarīgākie. Šeit ir mūsu testēšanas iestatījumi:

• Rīki: Google Lighthouse (darbināts inkognito logā) un Chrome DevTools veiktspējas profilers.
• Vide: Visas lietojumprogrammas tika būvētas produkcijai un pasniegtas lokāli.
• Testa apstākļi: Lai simulētu reālu mobilo lietotāju, visi testi tika veikti ar 4x CPU palēninājumu un Ātra 3G tīkla ierobežojumu. Tas neļauj rezultātus izkropļot augstas klases izstrādātāju aparatūrai.
• Galvenie mērītie rādītāji:
  • Sākotnējais JS pakotnes izmērs (gzipped): JavaScript apjoms, kas pārlūkprogrammai ir jālejupielādē, jāparsē un jāizpilda pirmajā apmeklējuma reizē.
  • First Contentful Paint (FCP): Atzīmē laiku, kad tiek renderēts pirmais DOM satura fragments.
  • Largest Contentful Paint (LCP): Mēra, kad tiek renderēts lielākais redzamais satura elements skatlogā. Galvenais Core Web Vital.
  • Time to Interactive (TTI): Laiks, kas nepieciešams, lai lapa kļūtu pilnībā interaktīva.
  • Total Blocking Time (TBT): Mēra kopējo laiku, kad galvenais pavediens bija bloķēts, novēršot lietotāja ievadi. Tieši korelē ar jauno INP (Interaction to Next Paint) Core Web Vital.
  • Atmiņas lietojums: Kaudzes lielums, kas izmērīts pēc sākotnējās ielādes un pēc vairākām mijiedarbībām.

Rezultāti: tiešs salīdzinājums

Atruna: Šie rezultāti ir balstīti uz mūsu konkrēto etalonuzdevuma lietojumprogrammu. Skaitļi ilustrē katra ietvara veiktspējas raksturlielumus, bet jūsu pašu lietojumprogrammas arhitektūra varētu dot atšķirīgus rezultātus.

1. kārta: sākotnējā ielāde un pakotnes izmērs

Jaunam lietotājam pirmais iespaids ir viss. Šī kārta koncentrējas uz to, cik ātri lietojumprogrammu var lejupielādēt un renderēt līdz lietojamam stāvoklim.

• Svelte: Uzvarētājs. Ar gzipped JS pakotni tikai ~9 KB apmērā, Svelte bija skaidrs līderis. Tā FCP un LCP rādītāji bija izcili, jo pārlūkprogrammai bija jāapstrādā ļoti maz ietvara koda. Panelis parādījās gandrīz acumirklī.
• SolidJS: Tuvu otrajai vietai. Pakotnes izmērs bija nedaudz lielāks - ~12 KB. Veiktspēja bija gandrīz identiska Svelte, nodrošinot ārkārtīgi ātru sākotnējās ielādes pieredzi.
• Vue: Spēcīgs sniegums. Vue pakotne bija cienījama izmēra - ~35 KB. Tā kompilatora optimizācijas spilgti izpaudās, nodrošinot ātru LCP un TTI, kas bija ļoti konkurētspējīgs.
• React: Vidusmēra sniegums. `react` un `react-dom` kombinācija radīja pakotni ~48 KB apmērā. Lai gan tas nekādā ziņā nav lēns, TTI bija manāmi garāks nekā līderiem, pateicoties darbam, kas saistīts ar VDOM izveidi un lietojumprogrammas hidratāciju.
• Angular: Uzlabots, bet joprojām lielākais. Angular pakotne bija lielākā - ~65 KB. Lai gan tas ir milzīgs uzlabojums salīdzinājumā ar vecākām versijām, sākotnējās parsēšanas un palaišanas izmaksas joprojām bija visaugstākās, kā rezultātā šajā testā tika sasniegts lēnākais FCP un LCP.

Ieskats: Projektiem, kur sākotnējās ielādes laiks ir absolūti kritisks (piemēram, e-komercijas galvenās lapas, mārketinga vietnes), kompilatoru bāzes ietvariem, piemēram, Svelte un Solid, ir izteikta, izmērāma priekšrocība to minimālā izpildlaika nospieduma dēļ.

2. kārta: izpildlaika un mijiedarbības veiktspēja

Kad lietotne ir ielādēta, kāda ir sajūta to lietot? Mēs to pārbaudījām, veicot intensīvas darbības ar mūsu 1000 rindu datu tabulu: kārtojot pēc kolonnas un pielietojot teksta filtru, kas meklēja visās šūnās.

• SolidJS: Uzvarētājs. Solid veiktspēja šeit bija fenomenāla. Kārtošana un filtrēšana šķita acumirklīga. Tā smalki granulētā reaktivitāte nozīmēja, ka tika aizskarti tikai tie DOM mezgli, kuriem bija jāmainās. TBT bija neticami zems, norādot uz nebloķējošu lietotāja saskarni pat intensīvas skaitļošanas laikā.
• Svelte: Izcila veiktspēja. Svelte bija tieši aiz Solid. Tā kompilētās, tiešās DOM manipulācijas izrādījās ārkārtīgi efektīvas. Lietotāja pieredze bija plūstoša un atsaucīga, ar ļoti mazu TBT.
• Vue: Ļoti laba veiktspēja. Vue reaktivitātes sistēma efektīvi apstrādāja atjauninājumus. Bija ļoti neliela, gandrīz nemanāma aizkave filtrējot, salīdzinot ar Solid un Svelte, bet kopējā pieredze bija lieliska un apmierinātu lielāko daļu lietošanas gadījumu.
• React: Laba, bet prasa optimizāciju. Sākotnēji React implementācija uzrādīja manāmu aizkavi, filtrējot lielo tabulu. Galvenais pavediens tika bloķēts uz īsu brīdi, jo 1000 rindu komponenta pārrenderēšana bija dārga. To varēja atrisināt, manuāli pielietojot optimizācijas, piemēram, `React.memo` rindas komponentiem un `useMemo` filtrēšanas loģikai. Ar optimizāciju veiktspēja kļuva laba, bet tas prasīja papildu izstrādātāja pūles.
• Angular: Laba, ar niansēm. Angular noklusējuma izmaiņu noteikšanas mehānisms arī nedaudz cīnījās ar filtrēšanas uzdevumu, līdzīgi kā React. Tomēr, pārvietojot tabulas komponentu uz `OnPush` izmaiņu noteikšanas stratēģiju, veiktspēja ievērojami uzlabojās, padarot to ļoti atsaucīgu. Jaunā signālu funkcija Angular, visticamāk, to pielīdzinātu līderiem.

Ieskats: Augsti interaktīvām, ar datiem bagātām lietojumprogrammām Solid un Svelte arhitektūras nodrošina labāko veiktspēju jau no paša sākuma. VDOM bāzes bibliotēkas, piemēram, React un Vue, ir pilnībā spējīgas, bet var prasīt no izstrādātājiem lielāku uzmanību veiktspējas optimizācijas tehnikām, pieaugot sarežģītībai.

3. kārta: atmiņas lietojums

Lai gan mūsdienu galddatoros tas rada mazāk bažu, atmiņas lietojums joprojām ir kritisks zemas klases mobilajām ierīcēm un ilgstoši darbojošām lietojumprogrammām, lai izvairītos no gausuma un avārijām.

• Svelte & SolidJS: Dalīja pirmo vietu ar viszemāko atmiņas nospiedumu. Bez VDOM atmiņā un ar minimālu izpildlaiku, tie bija liesi un efektīvi.
• Vue: Patērēja nedaudz vairāk atmiņas nekā līderi, kas skaidrojams ar tā VDOM un reaktivitātes sistēmu, bet palika ļoti efektīvs.
• React: Bija lielāks atmiņas nospiedums VDOM un šķiedru (fiber) arhitektūras pieskaitāmo izmaksu dēļ.
• Angular: Reģistrēja visaugstāko atmiņas lietojumu, kas ir sekas tā visaptverošajai ietvara struktūrai un Zone.js izmaiņu noteikšanai.

Ieskats: Lietojumprogrammām, kas paredzētas resursu ierobežotām ierīcēm vai ir paredzētas ļoti ilgām sesijām, Svelte un Solid zemākās atmiņas izmaksas var būt būtiska priekšrocība.

Ārpus skaitļiem: kvalitatīvie faktori

Veiktspējas etalontesti stāsta kritisku stāsta daļu, bet ne visu stāstu. Ietvara izvēle ir ļoti atkarīga arī no jūsu komandas, projekta apjoma un ilgtermiņa mērķiem.

Izstrādātāja pieredze (DX) un mācīšanās līkne

• Vue un Svelte bieži tiek slavēti par patīkamāko DX un maigāko mācīšanās līkni. To sintakse ir intuitīva, un dokumentācija ir augstākās klases.
• React JSX un uz "hooks" balstītais modelis ir spēcīgs, bet var būt ar stāvāku mācīšanās līkni, īpaši attiecībā uz tādiem jēdzieniem kā memoizācija un efektu atkarības.
• SolidJS ir viegli apgūstams React izstrādātājiem sintaktiski, bet prasa mentālā modeļa maiņu, lai saprastu tā smalki granulēto reaktivitāti.
• Angular uzskatos stingrā daba un paļaušanās uz TypeScript un tādiem jēdzieniem kā atkarību injekcija rada visstāvāko mācīšanās līkni, bet šī struktūra var nodrošināt konsekvenci lielās komandās.

Ekosistēma un kopienas atbalsts

• React šeit ir nepārspējams līderis. Jūs varat atrast bibliotēku, rīku vai pamācību gandrīz jebkurai problēmai, ar kuru varat saskarties. Šī milzīgā globālā kopiena nodrošina neticamu drošības tīklu.
• Vue un Angular arī ir ļoti lielas, nobriedušas ekosistēmas ar spēcīgu korporatīvo atbalstu un bagātīgu bibliotēku un kopienas resursu klāstu.
• Svelte un SolidJS ir mazākas, bet strauji augošas ekosistēmas. Lai gan jūs varbūt neatradīsiet gatavu komponentu katram nišas lietošanas gadījumam, to kopienas ir kaislīgas un ļoti aktīvas.

Secinājums: kurš ietvars ir piemērots tieši jums?

Pēc datu analīzes un kvalitatīvo faktoru izvērtēšanas ir skaidrs, ka nav viena "labākā" ietvara. Optimālā izvēle ir pilnībā atkarīga no jūsu projekta prioritātēm.

Šeit ir mūsu gala ieteikums, balstoties uz dažādiem scenārijiem:

• Absolūtai maksimālai veiktspējai un liesām būvēm: Izvēlieties Svelte vai SolidJS. Ja jūsu galvenais mērķis ir pēc iespējas ātrāki ielādes laiki, visatsaucīgākā lietotāja saskarne un mazākais iespējamais pakotnes izmērs (piemēram, e-komercijas vietnes, mobilajām ierīcēm paredzētas tīmekļa lietotnes, interaktīvas vizualizācijas), šie ietvari ir savā klasē. SolidJS gūst priekšrocību sarežģītā, reaktīvā datu manipulācijā, savukārt Svelte piedāvā nedaudz vienkāršāku, maģiskāku izstrādātāja pieredzi.
• Milzīgai ekosistēmai un darbinieku pieejamībai: Izvēlieties React. Ja jūsu projektam nepieciešama piekļuve visplašākajam bibliotēku, rīku un izstrādātāju klāstam, React ir drošākā un pragmatiskākā izvēle. Tā veiktspēja ir ļoti laba, un tā dominance darba tirgū atvieglo jūsu izstrādes komandas paplašināšanu jebkur pasaulē.
• Līdzsvaram starp veiktspēju un pieejamību: Izvēlieties Vue. Vue atrod zelta vidusceļu. Tas piedāvā izcilu veiktspēju, kas konkurē ar React, bet ar izstrādātāja pieredzi, ko daudzi uzskata par intuitīvāku un vieglāk apgūstamu. Tas ir fantastisks universāls risinājums mazām līdz liela mēroga lietojumprogrammām.
• Liela mēroga, korporatīvām lietojumprogrammām: Izvēlieties Angular. Ja jūs veidojat sarežģītu, ilgtermiņa lietojumprogrammu ar lielu izstrādātāju komandu, Angular strukturētā un uzskatos stingrā daba var būt milzīgs ieguvums. Tā nodrošina konsekvenci un piedāvā robustu, visaptverošu platformu, kas spēj tikt galā ar korporatīvā līmeņa sarežģītību, un tās veiktspēja nepārtraukti uzlabojas.

JavaScript ietvaru pasaule attīstās ātrāk nekā jebkad agrāk. Kompilatoru uzplaukums un atteikšanās no Virtuālā DOM, ko veic tādi izaicinātāji kā Svelte un SolidJS, virza visu ekosistēmu uz priekšu. Galu galā "ietvaru kari" ir laba lieta – tie noved pie inovācijām, labākas veiktspējas un jaudīgākiem rīkiem izstrādātājiem, lai veidotu nākamās paaudzes tīmekļa pieredzes. Izvēlieties rīku, kas vislabāk atbilst jūsu projekta unikālajiem ierobežojumiem un mērķiem, un jūs būsiet ceļā uz panākumiem.