Nav ÄtrÄka veida, kÄ palÄninÄt tÄ«mekļa vietnes darbÄ«bu (paredzÄts vÄrdu spÄlei), kÄ izmantot tajÄ JavaScript kodu. Lietojot JavaScript, par to ir jÄmaksÄ ar projektu izpildi ne mazÄk kÄ Äetras reizes. LÅ«k, kÄ vietnes JavaScript kods ielÄdÄ lietotÄju sistÄmas:
- Faila lejupielÄde tÄ«klÄ.
- NeiesaiÅota pirmkoda parsÄÅ”ana un kompilÄÅ”ana pÄc lejupielÄdes.
- JavaScript koda izpilde.
- AtmiÅas patÄriÅÅ”.
Å Ä« kombinÄcija izrÄdÄs .
Un mÄs savos projektos iekļaujam arvien vairÄk JS koda. TÄ kÄ organizÄcijas virzÄs uz vietnÄm, kuras nodroÅ”ina ietvari un bibliotÄkas, piemÄram, React, Vue un citas, mÄs padarÄm vietÅu pamatfunkcionalitÄti ļoti atkarÄ«gu no JavaScript.
Esmu redzÄjis daudzas ļoti smagas vietnes, kurÄs izmanto JavaScript ietvarus. Bet mans redzÄjums par Å”o jautÄjumu ir ļoti tendenciozs. Fakts ir tÄds, ka uzÅÄmumi, ar kuriem es strÄdÄju, vÄrÅ”as pie manis tieÅ”i tÄpÄc, ka viÅi saskaras ar sarežģītÄm problÄmÄm vietnes veiktspÄjas jomÄ. RezultÄtÄ man radÄs interese par to, cik Ŕī problÄma ir izplatÄ«ta, un par to, kÄdus "sodus" mÄs maksÄjam, izvÄloties vienu vai otru karkasu par pamatu noteiktai vietnei.
Projekts man palÄ«dzÄja to saprast. .
Dati
HTTP arhÄ«va projekts kopumÄ izseko 4308655 5484239 XNUMX saites uz parastajÄm darbvirsmas vietnÄm un XNUMX XNUMX XNUMX saites uz mobilajÄm vietnÄm. Starp daudzajiem rÄdÄ«tÄjiem, kas saistÄ«ti ar Ŕīm saitÄm, ir attiecÄ«gajÄs vietnÄs atrodamo tehnoloÄ£iju saraksts. Tas nozÄ«mÄ, ka mÄs varam atlasÄ«t tÅ«kstoÅ”iem vietÅu, kurÄs tiek izmantoti dažÄdi ietvari un bibliotÄkas, un uzzinÄt, cik daudz koda tÄs nosÅ«ta klientiem un cik lielu slodzi Å”is kods rada lietotÄju sistÄmÄs.
Es apkopoju 2020. gada marta datus, kas bija jaunÄkie dati, kuriem man bija piekļuve.
Es nolÄmu salÄ«dzinÄt apkopotos HTTP arhÄ«va datus visÄs vietnÄs ar datiem no vietnÄm, kas atrastas, izmantojot React, Vue un Angular, lai gan apsvÄru iespÄju izmantot arÄ« citus avota materiÄlus.
Lai padarÄ«tu to interesantÄku, es avota datu kopai pievienoju arÄ« vietnes, kurÄs tiek izmantots jQuery. Å Ä« bibliotÄka joprojÄm ir ļoti populÄra. Tas arÄ« ievieÅ” atŔķirÄ«gu pieeju tÄ«mekļa izstrÄdei nekÄ vienas lapas lietojumprogrammas (SPA) modelis, ko piedÄvÄ React, Vue un Angular.
Saites HTTP arhÄ«vÄ, kas pÄrstÄv vietnes, kurÄs tiek izmantotas interesÄjoÅ”Äs tehnoloÄ£ijas
Ietvars vai bibliotÄka
Saites uz mobilajÄm vietnÄm
Saites uz parastajÄm vietnÄm
jQuery
4615474
3714643
ReaÄ£Ät
489827
241023
Vue
85649
43691
leÅÄ·a
19423
18088
CerÄ«bas un sapÅi
Pirms pÄrejam uz datu analÄ«zi, es vÄlos runÄt par to, uz ko es vÄlÄtos cerÄt.
Es uzskatu, ka ideÄlÄ pasaulÄ ietvariem ir jÄsniedz ne tikai izstrÄdÄtÄju vajadzÄ«bas, bet arÄ« jÄsniedz kÄds Ä«paÅ”s ieguvums vidusmÄra lietotÄjam, kurÅ” strÄdÄ ar mÅ«su vietnÄm. VeiktspÄja ir tikai viena no Ŕīm priekÅ”rocÄ«bÄm. Å eit spÄlÄ pieejamÄ«ba un droŔība. Bet tas ir tikai vissvarÄ«gÄkais.
TÄtad ideÄlÄ pasaulÄ kÄda veida sistÄmai vajadzÄtu atvieglot augstas veiktspÄjas vietnes izveidi. Tas jÄdara vai nu tÄpÄc, ka ietvars sniedz izstrÄdÄtÄjam pienÄcÄ«gu bÄzi, uz kura bÅ«vÄt projektu, vai arÄ« tÄpÄc, ka tas nosaka attÄ«stÄ«bas ierobežojumus, izvirza tam prasÄ«bas, kas sarežģī tÄ izstrÄdi, kas pagriežas. bÅ«t lÄnam.
LabÄkajiem ietvariem vajadzÄtu darÄ«t abus: dot labu bÄzi un uzlikt ierobežojumus darbam, ļaujot sasniegt pienÄcÄ«gu rezultÄtu.
Datu vidÄjo vÄrtÄ«bu analÄ«ze nesniegs mums nepiecieÅ”amo informÄciju. Un patiesÄ«bÄ Å”Ä« pieeja atstÄj mÅ«su uzmanÄ«bu . TÄ vietÄ es atvasinÄju procentus no maniem datiem. TÄs ir 10, 25, 50 (vidÄjÄ), 75, 90 procentiles.
Mani Ä«paÅ”i interesÄ 10. un 90. procentile. 10. procentile atspoguļo vislabÄko veiktspÄju (vai vismaz vairÄk vai mazÄk tuvu labÄkajam) konkrÄtai sistÄmai. Citiem vÄrdiem sakot, tas nozÄ«mÄ, ka tikai 10% vietÅu, kas izmanto noteiktu sistÄmu, sasniedz Å”o vai augstÄku lÄ«meni. SavukÄrt 90. procentile ir medaļas otra puse ā tÄ parÄda, cik slikti var kļūt. 90. procentile ir vietnes, kas atrodas aiz muguras ā tÄs ir 10% vietÅu, kurÄm ir visvairÄk JS koda vai kurÄm ir visilgÄkais laiks koda apstrÄdei galvenajÄ pavedienÄ.
JavaScript koda apjomi
Vispirms ir lietderÄ«gi analizÄt JavaScript koda lielumu, ko tÄ«klÄ pÄrraida dažÄdas vietnes.
Uz mobilajÄm ierÄ«cÄm pÄrsÅ«tÄ«tÄ JavaScript koda apjoms (Kb).
Procentiles
10
25
50
75
90
Visas vietnes
93.4
196.6
413.5
746.8
1201.6
jQuery vietnes
110.3
219.8
430.4
748.6
1162.3
Vue vietnes
244.7
409.3
692.1
1065.5
1570.7
LeÅÄ·iskÄs vietas
445.1
675.6
1066.4
1761.5
2893.2
ReaÄ£Ät vietnes
345.8
441.6
690.3
1238.5
1893.6
Uz mobilajÄm ierÄ«cÄm nosÅ«tÄ«tÄ JavaScript koda daudzums
Uz galddatoriem pÄrsÅ«tÄ«tÄ JavaScript koda daudzums (Kb).
Procentiles
10
25
50
75
90
Visas vietnes
105.5
226.6
450.4
808.8
1267.3
jQuery vietnes
121.7
242.2
458.3
803.4
1235.3
Vue vietnes
248.0
420.1
718.0
1122.5
1643.1
LeÅÄ·iskÄs vietas
468.8
716.9
1144.2
1930.0
3283.1
ReaÄ£Ät vietnes
308.6
469.0
841.9
1472.2
2197.8
Uz galddatoriem nosÅ«tÄ«tÄ JavaScript koda daudzums
Ja mÄs runÄjam tikai par JS koda lielumu, ko vietnes nosÅ«ta ierÄ«cÄm, tad viss izskatÄs apmÄram tÄ, kÄ jÅ«s varÄtu gaidÄ«t. Proti, ja tiek izmantots kÄds no ietvariem, tas nozÄ«mÄ, ka pat ideÄlÄ situÄcijÄ palielinÄsies vietnes JavaScript koda apjoms. Tas nav pÄrsteidzoÅ”i - jÅ«s nevarat izveidot JavaScript ietvaru par vietnes pamatu un gaidÄ«t, ka projekta JS koda apjoms bÅ«s ļoti zems.
Å ajos datos ir ievÄrojams tas, ka dažus ietvarus un bibliotÄkas var uzskatÄ«t par labÄku sÄkuma punktu projektam nekÄ citas. Vietnes ar jQuery izskatÄs vislabÄk. VietÅu datora versijÄs tajÄs ir par 15% vairÄk JavaScript nekÄ visÄs vietnÄs, savukÄrt mobilajÄs ierÄ«cÄs tÄs satur par 18% vairÄk. (JÄatzÄ«st, ka Å”eit ir daži datu bojÄjumi. Fakts ir tÄds, ka jQuery atrodas daudzÄs vietnÄs, tÄpÄc ir tikai dabiski, ka Å”Ädas vietnes ir cieÅ”Äk saistÄ«tas ar kopÄjo vietÅu skaitu nekÄ citas. TomÄr tas neietekmÄ to, cik neapstrÄdÄts. dati tiek izvadÄ«ti katram ietvaram.)
Lai gan koda apjoma pieaugums par 15-18% ir ievÄrojams rÄdÄ«tÄjs, salÄ«dzinot to ar citiem ietvariem un bibliotÄkÄm, var secinÄt, ka jQuery iekasÄtais "nodoklis" ir ļoti zems. LeÅÄ·iskÄs vietnes, kas atrodas 10. procentilÄ, nosÅ«ta par 344% vairÄk datu uz galddatoru nekÄ visas vietnes un par 377% vairÄk uz mobilajÄm ierÄ«cÄm. React vietnes ir nÄkamÄs smagÄkÄs, nosÅ«ta par 193% vairÄk koda uz darbvirsmu nekÄ visas vietnes un par 270% vairÄk uz mobilajÄm ierÄ«cÄm.
IepriekÅ” minÄju, ka, lai gan ietvara izmantoÅ”ana nozÄ«mÄ, ka projektÄ tiks iekļauts noteikts koda daudzums, paÅ”Ä darba sÄkumÄ pie tÄ ceru, ka ietvars spÄj kaut kÄ ierobežot izstrÄdÄtÄju. Jo Ä«paÅ”i mÄs runÄjam par maksimÄlÄ koda daudzuma ierobežoÅ”anu.
Interesanti, ka jQuery vietnes ievÄro Å”o ideju. Lai gan tie ir nedaudz smagÄki par visÄm vietnÄm 10. procentiles lÄ«menÄ« (par 15ā18%), 90. procentilÄ tie ir nedaudz vieglÄki ā aptuveni 3% gan galddatoros, gan mobilajÄs ierÄ«cÄs. Tas nenozÄ«mÄ, ka tas ir ļoti nozÄ«mÄ«gs ieguvums, taÄu var teikt, ka vismaz jQuery vietnÄm nav milzÄ«gu JavaScript koda izmÄru, pat to lielÄkajÄs versijÄs.
TaÄu to nevar teikt par citiem ietvariem.
TÄpat kÄ 10. procentiles gadÄ«jumÄ, 90. procentiles vietÄs Angular un React atŔķiras no citÄm vietnÄm, taÄu tÄs diemžÄl atŔķiras uz sliktÄko pusi.
Pie 90. procentiles Angular vietnes uz mobilajÄm ierÄ«cÄm sÅ«ta par 141% vairÄk datu nekÄ visas vietnes un par 159% vairÄk uz galddatoriem. Reakcijas vietnes uz galddatoriem sÅ«ta par 73% vairÄk nekÄ visas vietnes un par 58% vairÄk uz mobilajÄm ierÄ«cÄm. React vietÅu koda lielums 90. procentile ir 2197.8 KB. Tas nozÄ«mÄ, ka Å”Ädas vietnes uz mobilajÄm ierÄ«cÄm nosÅ«ta par 322.9 KB vairÄk datu nekÄ to tuvÄkie konkurenti, pamatojoties uz Vue. Plaisa starp darbvirsmas vietnÄm, kuru pamatÄ ir Angular and React, un citÄm vietnÄm ir vÄl lielÄka. PiemÄram, darbvirsmas React vietnes uz ierÄ«cÄm nosÅ«ta par 554.7 KB vairÄk JS koda nekÄ lÄ«dzvÄrtÄ«gas Vue vietnes.
Laiks, kas nepiecieÅ”ams JavaScript koda apstrÄdei galvenajÄ pavedienÄ
IepriekÅ” minÄtie dati skaidri norÄda, ka vietnÄs, kurÄs tiek izmantoti pÄtÄmie ietvari un bibliotÄkas, ir liels JavaScript koda daudzums. Bet, protams, tÄ ir tikai viena daļa no mÅ«su vienÄdojuma.
Kad JavaScript kods ir nonÄcis pÄrlÅ«kprogrammÄ, tas ir jÄpÄrnes darba stÄvoklÄ«. ÄŖpaÅ”i daudz problÄmu rada tÄs darbÄ«bas, kas jÄveic ar kodu galvenajÄ pÄrlÅ«kprogrammas pavedienÄ. Galvenais pavediens ir atbildÄ«gs par lietotÄja darbÄ«bu apstrÄdi, stilu aprÄÄ·inÄÅ”anu, lapas izkÄrtojuma veidoÅ”anu un parÄdÄ«Å”anu. Ja jÅ«s pÄrslogojat galveno pavedienu ar JavaScript uzdevumiem, tam nebÅ«s iespÄjas laikus izpildÄ«t pÄrÄjos uzdevumus. Tas noved pie kavÄÅ”anÄs un "bremzÄÅ”anas" lapu darbÄ.
HTTP arhÄ«va datu bÄzÄ ir informÄcija par to, cik ilgs laiks nepiecieÅ”ams JavaScript koda apstrÄdei V8 dzinÄja galvenajÄ pavedienÄ. Tas nozÄ«mÄ, ka mÄs varam apkopot Å”os datus un uzzinÄt, cik daudz laika galvenajam pavedienam nepiecieÅ”ams, lai apstrÄdÄtu dažÄdu vietÅu JavaScript.
Procesora laiks (milisekundÄs), kas saistÄ«ts ar skripta apstrÄdi mobilajÄs ierÄ«cÄs
Procentiles
10
25
50
75
90
Visas vietnes
356.4
959.7
2372.1
5367.3
10485.8
jQuery vietnes
575.3
1147.4
2555.9
5511.0
10349.4
Vue vietnes
1130.0
2087.9
4100.4
7676.1
12849.4
LeÅÄ·iskÄs vietas
1471.3
2380.1
4118.6
7450.8
13296.4
ReaÄ£Ät vietnes
2700.1
5090.3
9287.6
14509.6
20813.3
Procesora laiks, kas saistÄ«ts ar skriptu apstrÄdi mobilajÄs ierÄ«cÄs
Procesora laiks (milisekundÄs), kas saistÄ«ts ar skriptu apstrÄdi galddatoru ierÄ«cÄs
Procentiles
10
25
50
75
90
Visas vietnes
146.0
351.8
831.0
1739.8
3236.8
jQuery vietnes
199.6
399.2
877.5
1779.9
3215.5
Vue vietnes
350.4
650.8
1280.7
2388.5
4010.8
LeÅÄ·iskÄs vietas
482.2
777.9
1365.5
2400.6
4171.8
ReaÄ£Ät vietnes
508.0
1045.6
2121.1
4235.1
7444.3
Procesora laiks, kas saistÄ«ts ar skriptu apstrÄdi galddatoru ierÄ«cÄs
Å eit jÅ«s varat redzÄt kaut ko ļoti pazÄ«stamu.
SÄkumÄ vietnes ar jQuery tÄrÄ ievÄrojami mazÄk par JavaScript apstrÄdi galvenajÄ pavedienÄ nekÄ citas vietnes. Pie 10. procentiles, salÄ«dzinot ar visÄm vietnÄm, jQuery vietnes mobilajÄs ierÄ«cÄs pavada par 61% vairÄk laika, apstrÄdÄjot JS kodu galvenajÄ pavedienÄ. Darbvirsmas jQuery vietÅu gadÄ«jumÄ apstrÄdes laiks palielinÄs par 37%. Pie 90. procentiles jQuery vietÅu rezultÄts ir ļoti tuvu kopÄjiem rÄdÄ«tÄjiem. KonkrÄti, jQuery vietnes mobilajÄs ierÄ«cÄs galvenajÄ pavedienÄ pavada par 1.3% mazÄk laika nekÄ visas vietnes un par 0.7% mazÄk laika galddatoros.
MÅ«su vÄrtÄjuma otrÄ pusÄ ir karkasi, kuriem raksturÄ«ga lielÄkÄ slodze uz galveno pavedienu. Tas atkal ir Angular and React. VienÄ«gÄ atŔķirÄ«ba starp abÄm ir tÄ, ka, lai gan Angular vietnes pÄrlÅ«kprogrammÄm sÅ«ta vairÄk koda nekÄ React vietnes, Angular vietnÄm koda apstrÄdei nepiecieÅ”ams mazÄk CPU laika. Daudz mazÄk.
Pie 10. procentiles darbvirsmas Angular vietnes galvenajÄ pavedienÄ, apstrÄdÄjot JS kodu, pavada par 230% vairÄk laika nekÄ visas vietnes. MobilajÄm vietnÄm Å”is rÄdÄ«tÄjs ir 313%. Reakcijas vietnes darbojas vissliktÄk. Datoros viÅi pavada par 248% vairÄk laika, apstrÄdÄjot kodu nekÄ visÄs vietnÄs, un par 658% vairÄk laika mobilajÄs ierÄ«cÄs. 658% nav drukas kļūda. Pie 10. procentiles React vietnes sava koda apstrÄdei pavada 2.7 sekundes no galvenÄ pavediena laika.
90. procentile, salÄ«dzinot ar Å”iem milzÄ«gajiem skaitļiem, izskatÄs vismaz nedaudz labÄk. SalÄ«dzinot ar visÄm vietnÄm, Angular projekti galvenajÄ pavedienÄ pavada par 29% vairÄk laika galddatoru ierÄ«cÄs un par 27% vairÄk laika mobilajÄs ierÄ«cÄs. React vietÅu gadÄ«jumÄ tie paÅ”i skaitļi izskatÄs attiecÄ«gi 130% un 98%.
ProcentuÄlÄs novirzes 90. procentilei izskatÄs labÄk nekÄ lÄ«dzÄ«gas vÄrtÄ«bas 10. procentilei. Bet Å”eit ir vÄrts atcerÄties, ka skaitļi, kas norÄda laiku, Ŕķiet diezgan biedÄjoÅ”i. PieÅemsim, ka 20.8 sekundes galvenajÄ mobilajÄ pavedienÄ vietnei, kas izveidota ar React. (Es domÄju, ka stÄsts par to, kas patiesÄ«bÄ notiek Å”ajÄ laikÄ, ir atseviŔķa raksta vÄrts).
Å eit ir viena iespÄjamÄ komplikÄcija (paldies par to, ka pievÄrsu manu uzmanÄ«bu Å”ai funkcijai un rÅ«pÄ«gi apsvÄru datus no Ŕī viedokļa). Fakts ir tÄds, ka daudzas vietnes izmanto vairÄkus priekÅ”gala rÄ«kus. Jo Ä«paÅ”i esmu redzÄjis daudzas vietnes, kurÄs kopÄ ar React vai Vue tiek izmantots jQuery, jo Ŕīs vietnes migrÄ no jQuery uz citiem ietvariem vai bibliotÄkÄm. RezultÄtÄ es vÄlreiz nokļuvu datubÄzÄ, Å”oreiz atlasot tikai tÄs saites, kas atbilst vietnÄm, kuras izmanto tikai React, jQuery, Angular vai Vue, bet ne jebkuru to kombinÄciju. LÅ«k, ko es saÅÄmu.
Procesora laiks (milisekundÄs), kas saistÄ«ts ar skriptu apstrÄdi mobilajÄs ierÄ«cÄs situÄcijÄ, kad vietnes izmanto tikai vienu ietvaru vai tikai vienu bibliotÄku
Procentiles
10
25
50
75
90
Vietnes, kurÄs tiek izmantots tikai jQuery
542.9
1062.2
2297.4
4769.7
8718.2
Vietnes, kurÄs tiek izmantots tikai Vue
944.0
1716.3
3194.7
5959.6
9843.8
Vietnes, kurÄs tiek izmantots tikai Angular
1328.9
2151.9
3695.3
6629.3
11607.7
Vietnes, kas izmanto tikai React
2443.2
4620.5
10061.4
17074.3
24956.3
Procesora laiks, kas saistÄ«ts ar skriptu apstrÄdi mobilajÄs ierÄ«cÄs situÄcijÄ, kad vietnes izmanto tikai vienu ietvaru vai tikai vienu bibliotÄku
PirmkÄrt, tas nav pÄrsteidzoÅ”i: ja vietne izmanto tikai vienu sistÄmu vai vienu bibliotÄku, Å”Ädas vietnes veiktspÄja biežÄk uzlabojas. Katrs instruments darbojas labÄk 10. un 25. procentilÄ. Tam ir jÄga. Vietnei, kas izveidota, izmantojot vienu ietvaru, vajadzÄtu darboties labÄk nekÄ vietnei, kas izveidota, izmantojot divus vai vairÄkus ietvarus vai bibliotÄkas.
Faktiski katra izpÄtÄ«tÄ priekÅ”gala rÄ«ka veiktspÄja izskatÄs labÄka visos gadÄ«jumos, izÅemot vienu dÄ«vainu izÅÄmumu. Mani pÄrsteidza tas, ka 50. procentile un augstÄk vietÅu, kurÄs tiek izmantota React, darbÄ«ba ir sliktÄka, ja React ir vienÄ«gÄ bibliotÄka, ko tÄs izmanto. Tas, starp citu, bija iemesls, kÄpÄc es Å”eit sniedzu Å”os datus.
Tas ir nedaudz dÄ«vaini, bet es tomÄr mÄÄ£inÄÅ”u meklÄt izskaidrojumu Å”ai dÄ«vainÄ«bai.
Ja projektÄ tiek izmantots gan React, gan jQuery, iespÄjams, Å”is projekts ir kaut kur pusceļÄ, pÄrejot no jQuery uz React. VarbÅ«t tai ir kodu bÄze, kurÄ Å”Ä«s bibliotÄkas ir sajauktas. TÄ kÄ mÄs jau esam redzÄjuÅ”i, ka jQuery vietnes galvenajÄ pavedienÄ pavada mazÄk laika nekÄ React vietnes, tas var norÄdÄ«t, ka dažu jQuery funkcionalitÄtes ievieÅ”ana palÄ«dz vietnei darboties nedaudz labÄk.
TaÄu, projektam pÄrejot no jQuery uz React un vairÄk paļaujoties uz React, lietas mainÄs. Ja vietne ir patieÅ”Äm kvalitatÄ«va, un vietnes izstrÄdÄtÄji rÅ«pÄ«gi izmanto React, tad ar Å”Ädu vietni viss bÅ«s kÄrtÄ«bÄ. Bet vidÄjai React vietnei plaÅ”a React izmantoÅ”ana nozÄ«mÄ, ka galvenais pavediens ir pakļauts lielai slodzei.
Plaisa starp mobilajÄm ierÄ«cÄm un galddatoriem
VÄl viens skatÄ«jums, no kura es aplÅ«koju izpÄtÄ«tos datus, bija izpÄtÄ«t, cik liela ir atŔķirÄ«ba starp darbu ar vietnÄm mobilajÄs ierÄ«cÄs un galddatoros. Ja runÄjam par JavaScript koda apjomu salÄ«dzinÄÅ”anu, tad Å”Äds salÄ«dzinÄjums neko briesmÄ«gu neatklÄj. Protams, bÅ«tu jauki redzÄt mazÄku lejupielÄdÄjamÄ koda daudzumu, taÄu mobilÄ un galddatora koda daudzumÄ nav lielas atŔķirÄ«bas.
Bet, ja analizÄjam laiku, kas nepiecieÅ”ams koda apstrÄdei, kļūst pamanÄma ļoti liela atŔķirÄ«ba starp mobilajÄm ierÄ«cÄm un galddatoriem.
Laika pieaugums (procentos), kas saistÄ«ts ar skriptu apstrÄdi mobilajÄs ierÄ«cÄs, salÄ«dzinot ar datoriem
Procentiles
10
25
50
75
90
Visas vietnes
144.1
172.8
185.5
208.5
224.0
jQuery vietnes
188.2
187.4
191.3
209.6
221.9
Vue vietnes
222.5
220.8
220.2
221.4
220.4
LeÅÄ·iskÄs vietas
205.1
206.0
201.6
210.4
218.7
ReaÄ£Ät vietnes
431.5
386.8
337.9
242.6
179.6
Lai gan ir sagaidÄma zinÄma tÄlruÅa un klÄpjdatora koda apstrÄdes Ätruma atŔķirÄ«ba, tik lieli skaitļi man liecina, ka mÅ«sdienu sistÄmas nav pietiekami mÄrÄ·Ätas uz mazjaudas ierÄ«cÄm un ka tÄs cenÅ”as novÄrst atklÄto plaisu. Pat pie 10. procentiles React vietnes mobilajÄ galvenajÄ pavedienÄ pavada par 431.5% vairÄk laika nekÄ darbvirsmas galvenajÄ pavedienÄ. jQuery ir vismazÄkÄ atstarpe, taÄu arÄ« Å”eit atbilstoÅ”ais rÄdÄ«tÄjs ir 188.2%. Kad vietÅu izstrÄdÄtÄji savus projektus veido tÄ, ka to apstrÄde prasa vairÄk procesora laika (un tas notiek, un ar laiku tas tikai pasliktinÄs), mazjaudas ierÄ«Äu Ä«paÅ”niekiem par to ir jÄmaksÄ.
RezultÄti
Labiem ietvariem ir jÄsniedz izstrÄdÄtÄjiem labs pamats tÄ«mekļa projektu veidoÅ”anai (droŔības, pieejamÄ«bas, veiktspÄjas ziÅÄ), vai arÄ« tiem ir jÄbÅ«t iebÅ«vÄtiem ierobežojumiem, kas apgrÅ«tina tÄdas lietas izveidi, kas pÄrkÄpj Å”os ierobežojumus.
Å Ä·iet, ka tas neattiecas uz tÄ«mekļa projektu veiktspÄju (un, iespÄjams, ne uz tiem ).
Ir vÄrts atzÄ«mÄt, ka tas, ka React vai Angular vietnes pavada vairÄk CPU laika koda sagatavoÅ”anai nekÄ citas, nenozÄ«mÄ, ka React vietnes darbÄ«bas laikÄ ir vairÄk CPU ietilpÄ«gas nekÄ Vue vietnes. Faktiski mÅ«su pÄrskatÄ«tie dati ļoti maz stÄsta par ietvaru un bibliotÄku darbÄ«bas veiktspÄju. ViÅi vairÄk runÄ par attÄ«stÄ«bas pieejÄm, kuras, apzinÄti vai nÄ, Ŕīs sistÄmas var virzÄ«t programmÄtÄjus. MÄs runÄjam par ietvaru dokumentÄciju, par to ekosistÄmu, par kopÄ«gÄm izstrÄdes metodÄm.
Ir arÄ« vÄrts pieminÄt kaut ko, ko mÄs Å”eit neanalizÄjÄm, proti, cik daudz laika ierÄ«ce pavada, izpildot JavaScript kodu, pÄrvietojoties starp vietnes lapÄm. Arguments par labu SPA ir tÄds, ka pÄc vienas lapas aplikÄcijas ielÄdÄÅ”anas pÄrlÅ«kprogrammÄ lietotÄjs teorÄtiski varÄs ÄtrÄk atvÄrt vietnes lapas. Mana pieredze liecina, ka tas ir tÄlu no fakta. Bet mums nav datu, lai noskaidrotu Å”o jautÄjumu.
Skaidrs ir tas, ka, ja tÄ«mekļa vietnes izveidei izmantojat ietvaru vai bibliotÄku, jÅ«s veicat kompromisu, sÄkotnÄji ielÄdÄjot projektu un sagatavojot to darbam. Tas attiecas pat uz vispozitÄ«vÄkajiem scenÄrijiem.
AtbilstoÅ”Äs situÄcijÄs ir pilnÄ«gi iespÄjams panÄkt dažus kompromisus, taÄu ir svarÄ«gi, lai izstrÄdÄtÄji Å”Ädus kompromisus pieÅemtu apzinÄti.
TaÄu mums ir arÄ« pamats optimismam. Es priecÄjos redzÄt, cik cieÅ”i Chrome izstrÄdÄtÄji sadarbojas ar dažu mÅ«su pÄrskatÄ«to priekÅ”gala rÄ«ku izstrÄdÄtÄjiem, lai palÄ«dzÄtu uzlabot Å”o rÄ«ku veiktspÄju.
TomÄr esmu pragmatisks cilvÄks. Jaunas arhitektÅ«ras rada veiktspÄjas problÄmas tik bieži, cik tÄs tÄs atrisina. Un ir nepiecieÅ”ams laiks, lai novÄrstu kļūdas. TÄpat kÄ mums nevajadzÄtu gaidÄ«t atrisinÄs visas veiktspÄjas problÄmas, jums nevajadzÄtu to gaidÄ«t no mÅ«su iecienÄ«tÄko sistÄmu jaunajÄm versijÄm.
Ja vÄlaties izmantot kÄdu no Å”ajÄ rakstÄ apskatÄ«tajiem priekÅ”gala rÄ«kiem, tas nozÄ«mÄ, ka tikmÄr jums bÅ«s jÄpieliek papildu pÅ«les, lai nekaitÄtu sava projekta veiktspÄjai. Å eit ir daži apsvÄrumi, kas jÄÅem vÄrÄ pirms jaunas sistÄmas izveides.
- PÄrbaudi sevi ar veselo saprÄtu. Vai tieÅ”Äm ir jÄizmanto izvÄlÄtais ietvars? TÄ«rs JavaScript mÅ«sdienÄs spÄj daudz.
- Vai ir kÄda vieglÄka alternatÄ«va izvÄlÄtajam ietvaram (piemÄram, Preact, Svelte vai kaut kas cits), kas var sniegt jums 90% no Ŕī ietvara iespÄjÄm?
- Ja jau izmantojat ietvaru, apsveriet, vai ir kaut kas, kas piedÄvÄ labÄkas, konservatÄ«vÄkas standarta opcijas (piemÄram, Nuxt.js, nevis Vue, Next.js, nevis React, un tÄ tÄlÄk).
- Kas bÅ«s jÅ«su JavaScript veiktspÄja?
- KÄ tu vari izstrÄdes process, lai projektÄ bÅ«tu grÅ«tÄk ievadÄ«t vairÄk JavaScript koda, nekÄ tas ir absolÅ«ti nepiecieÅ”ams?
- Ja izmantojat ietvaru, lai atvieglotu attÄ«stÄ«bu, apsveriet to nosÅ«tÄ«t ietvara kodu klientiem. VarbÅ«t varat atrisinÄt visas problÄmas serverÄ«?
Parasti Ŕīs idejas ir vÄrts aplÅ«kot neatkarÄ«gi no tÄ, ko tieÅ”i esat izvÄlÄjies priekÅ”gala izstrÄdei. TaÄu tie ir Ä«paÅ”i svarÄ«gi, ja strÄdÄjat pie projekta, kuram jau no paÅ”a sÄkuma trÅ«kst veiktspÄjas.
CienÄ«jamie lasÄ«tÄji! KÄ jÅ«s redzat ideÄlo JavaScript ietvaru?
Avots: www.habr.com