Pa gen okenn fason pi rapid pou ralanti yon sit entènèt (pun entansyon) pase kouri yon pakèt kòd JavaScript sou li. Lè w ap itilize JavaScript, ou dwe peye pou li nan pèfòmans pwojè omwen kat fwa. Men sa kòd JavaScript sit la chaje sistèm itilizatè yo:
- Téléchargement yon fichye sou rezo a.
- Analize ak konpile kòd sous depake apre telechaje.
- Egzekite kòd JavaScript.
- Konsomasyon memwa.
Konbinezon sa a vire soti yo dwe .
Epi nou ap enkli pi plis ak plis kòd JS nan pwojè nou yo. Pandan òganizasyon yo ap avanse nan direksyon sit ki mache ak kad ak bibliyotèk tankou React, Vue ak lòt moun, n ap fè fonksyonalite debaz sit yo depann anpil sou JavaScript.
Mwen te wè yon anpil nan sit entènèt trè lou lè l sèvi avèk kad JavaScript. Men, vizyon mwen sou pwoblèm nan se fòtman partial. Reyalite a se ke konpayi yo mwen travay ak vin jwenn mwen jisteman paske yo gen pwoblèm konplèks pèfòmans sit entènèt. Kòm yon rezilta, mwen te vin kirye pou konnen kijan pwoblèm sa a gaye toupatou, ak ki "amann" nou peye lè nou chwazi youn oswa yon lòt kad kòm baz pou yon sit sèten.
Pwojè sa a te ede m konnen sa. .
Done
Pwojè HTTP Achiv la swiv yon total 4308655 lyen ki mennen nan sit biwo regilye yo ak 5484239 lyen ki mennen nan sit mobil. Pami anpil endikatè ki asosye ak lyen sa yo gen yon lis teknoloji yo jwenn sou sit korespondan yo. Sa vle di nou ka echantiyon plizyè milye sit ki sèvi ak diferan kad ak bibliyotèk epi aprann konbyen kòd yo voye bay kliyan yo ak konbyen chaj kòd sa a mete sou sistèm itilizatè yo.
Mwen te kolekte done nan mwa mas 2020, ki te pi resan done mwen te gen aksè a.
Mwen deside konpare done HTTP Achiv yo pou tout sit ak done pou sit yo te jwenn yo ap itilize React, Vue, ak Angular, byenke mwen te konsidere itilize lòt materyèl sous tou.
Pou fè li pi enteresan, mwen te ajoute tou sit ki sèvi ak jQuery nan seri done sous la. Bibliyotèk sa a toujou trè popilè. Li entwodui tou yon apwòch nan devlopman sit entènèt ki diferan de modèl Single Page Application (SPA) React, Vue ak Angular ofri.
Lyen nan Achiv HTTP ki reprezante sit yo te jwenn ki itilize teknoloji ki enterese nou
Kad oswa bibliyotèk
Lyen ki mennen nan sit mobil
Lyen ki mennen nan sit regilye yo
jQuery
4615474
3714643
Reyaji
489827
241023
Vue
85649
43691
Angilè
19423
18088
Espwa ak rèv
Anvan nou ale nan analize done yo, mwen vle pale sou sa mwen ta renmen espere pou.
Mwen kwè ke nan yon mond ideyal, kad yo ta ale pi lwen pase satisfè bezwen yo nan devlopè yo ak bay kèk benefis konkrè itilizatè yo chak jou nan sit nou yo. Pwodiktivite se jis youn nan benefis sa yo. Aksesiblite ak sekirite tou vin nan tèt ou isit la. Men, sa a se sèlman bagay ki pi enpòtan.
Se konsa, nan yon mond ideyal, kèk kalite fondasyon ta dwe fè li pi fasil yo kreye yon sit entènèt ki gen gwo pèfòmans. Sa a ta dwe fèt swa akòz lefèt ke fondasyon an bay pwomotè a yon baz desan sou ki bati yon pwojè, oswa akòz lefèt ke li enpoze restriksyon sou devlopman an, mete pi devan kondisyon pou li ki fè li difisil pou devlope yon bagay. ki vin ralanti.
Pi bon kad yo ta dwe fè tou de: bay yon bon baz, ak enpoze restriksyon sou travay la ki pèmèt ou reyalize yon rezilta desan.
Analize valè medyàn done yo pa pral ba nou enfòmasyon nou bezwen an. Epi, an reyalite, apwòch sa a kite pi lwen pase atansyon nou . Olye de sa, mwen te sòti nòt percentile nan done mwen te genyen yo. Sa yo se 10, 25, 50 (médyàn), 75, 90 percentiles.
Mwen patikilyèman enterese nan 10yèm ak 90yèm percentile yo. 10yèm percentile a reprezante pi bon pèfòmans (oswa omwen plis oswa mwens pre pi bon an) pou yon kad patikilye. Nan lòt mo, sa vle di ke sèlman 10% nan sit ki itilize yon kad patikilye rive nan nivo sa a, oswa yon nivo ki pi wo. 90yèm percentile la, lòt bò, se lòt bò pyès monnen an - li montre nou jan bagay yo ka move. 90yèm percentile se sit final yo—dènye 10% sit sa yo ki gen pi gwo kantite kòd JS oswa pi long tan ki nesesè pou trete kòd yo sou fil prensipal la.
Komèsan nan kòd JavaScript
Pou kòmanse, li fè sans pou analize gwosè kòd JavaScript ki transmèt pa diferan sit sou rezo a.
Kantite kòd JavaScript (KB) transfere sou aparèy mobil
Persantil
10
25
50
75
90
Tout sit
93.4
196.6
413.5
746.8
1201.6
sit jQuery
110.3
219.8
430.4
748.6
1162.3
Sit wèb Vue
244.7
409.3
692.1
1065.5
1570.7
Sit entènèt angilè
445.1
675.6
1066.4
1761.5
2893.2
Reyaji sou sit entènèt yo
345.8
441.6
690.3
1238.5
1893.6
Kantite kòd JavaScript voye sou aparèy mobil
Kantite kòd JavaScript (KB) transfere sou aparèy Desktop
Persantil
10
25
50
75
90
Tout sit
105.5
226.6
450.4
808.8
1267.3
sit jQuery
121.7
242.2
458.3
803.4
1235.3
Sit wèb Vue
248.0
420.1
718.0
1122.5
1643.1
Sit entènèt angilè
468.8
716.9
1144.2
1930.0
3283.1
Reyaji sou sit entènèt yo
308.6
469.0
841.9
1472.2
2197.8
Kantite kòd JavaScript transfere sou aparèy Desktop
Si nou pale sèlman sou gwosè a nan kòd JS ke sit yo voye bay aparèy, Lè sa a, tout bagay sanble sou jan ou ta ka atann. Savwa, si youn nan kad yo itilize, sa vle di ke menm nan yon sitiyasyon ideyal, volim nan kòd JavaScript pou sit la ap ogmante. Sa a se pa etone - ou pa ka fè yon fondasyon JavaScript baz la nan yon sit epi atann ke kantite lajan an nan kòd JS pou pwojè a pral trè ba.
Ki sa ki enteresan sou done sa yo se ke kèk kad ak bibliyotèk yo ka konsidere kòm pi bon pwen depa pou yon pwojè pase lòt. Sit entènèt ki gen jQuery sanble pi byen. Sit Desktop yo genyen 15% plis JavaScript pase tout sit, epi sit mobil yo genyen 18% plis JavaScript. (Se vre, gen kèk skew nan done yo isit la. Reyalite a se ke jQuery prezan sou anpil sit, kidonk li natirèl ke sit sa yo gen plis relasyon ak kantite total sit pase lòt moun. Sepandan, sa a pa afekte kouman. done sous yo se pwodiksyon pou chak kad.)
Pandan ke 15-18% kwasans kòd se yon figi enpòtan, lè yo konpare ak lòt kad ak bibliyotèk, taks la enpoze pa jQuery trè ba. Sit angilè nan 10yèm percentile voye 344% plis done sou aparèy Desktop pase tout sit, ak 377% plis sou aparèy mobil. Sit React yo se pwochen pi lou yo, voye 193% plis kòd nan aparèy Desktop pase tout sit, ak 270% plis nan aparèy mobil.
Mwen te mansyone byen bonè ke byenke lè l sèvi avèk yon fondasyon vle di ke yon sèten kantite kòd yo pral enkli nan pwojè a nan kòmansman an anpil nan travay sou li, mwen espere ke fondasyon an se kapab yon jan kanmenm limite pwomotè a. An patikilye, nou ap pale sou limite kantite maksimòm kòd.
Ki sa ki enteresan se ke sit jQuery swiv lide sa a. Malgre ke yo, nan nivo 10yèm percentile, yon ti kras pi lou pase tout sit (pa 15-18%), yo, nan nivo percentile 90th, yo se yon ti kras pi lejè pase tout sit - pa apeprè 3% nan tou de Desktop ak mobil vèsyon. Sa a pa vle di ke sa a se yon benefis trè enpòtan, men li ka di ke sit jQuery omwen pa gen gwo gwosè kòd JavaScript menm nan pi gwo vèsyon yo.
Men, menm bagay la tou pa ka di sou lòt kad.
Menm jan ak nan ka a nan percentile 10th la, nan sit percentile 90th sou Angular ak React diferan de lòt sit, men yo diferan, malerezman, pou pi mal la.
Nan 90yèm percentile, sit angilè voye 141% plis done nan aparèy mobil pase tout sit, ak 159% plis nan aparèy Desktop. Sit React voye 73% plis sou aparèy Desktop pase tout sit, ak 58% plis sou aparèy mobil. Gwosè kòd sit React nan 90yèm percentile se 2197.8 KB. Sa vle di sit sa yo voye 322.9 KB plis done sou aparèy mobil pase konpetitè ki pi pre Vue yo. Diferans ki genyen ant sit Desktop ki baze sou Angular ak React ak lòt sit se menm pi gwo. Pou egzanp, sit Desktop React voye 554.7 KB plis kòd JS nan aparèy pase sit Vue menm jan an.
Tan yo pran pou trete kòd JavaScript sou fil prensipal la
Done ki anwo yo montre klèman sit ki sèvi ak kad ak bibliyotèk yo etidye yo genyen yon gwo kantite kòd JavaScript. Men, nan kou, sa a se sèlman yon pati nan ekwasyon nou an.
Apre kòd JavaScript a te rive nan navigatè a, li bezwen yo dwe pote nan yon eta k ap travay. Espesyalman anpil pwoblèm yo te koze pa aksyon sa yo ki dwe fèt ak kòd nan fil navigatè prensipal la. Fil prensipal la responsab pou trete aksyon itilizatè yo, kalkile estil, ak bati ak montre layout paj la. Si ou akable fil prensipal la ak travay JavaScript, li pa pral gen opòtinite pou konplete lòt travay nan yon fason apwopriye. Sa a mennen nan reta ak "fren" nan operasyon an nan paj.
Baz done HTTP Achiv la gen enfòmasyon sou konbyen tan li pran pou trete kòd JavaScript sou fil prensipal motè V8 la. Sa vle di ke nou ka kolekte done sa yo epi aprann konbyen tan fil prensipal la pran pou trete JavaScript nan divès sit.
Tan CPU (an milisgond) ki gen rapò ak pwosesis script sou aparèy mobil
Persantil
10
25
50
75
90
Tout sit
356.4
959.7
2372.1
5367.3
10485.8
sit jQuery
575.3
1147.4
2555.9
5511.0
10349.4
Sit wèb Vue
1130.0
2087.9
4100.4
7676.1
12849.4
Sit entènèt angilè
1471.3
2380.1
4118.6
7450.8
13296.4
Reyaji sou sit entènèt yo
2700.1
5090.3
9287.6
14509.6
20813.3
Tan CPU ki gen rapò ak pwosesis script sou aparèy mobil
Tan CPU (an milisgond) ki gen rapò ak pwosesis script sou aparèy Desktop
Persantil
10
25
50
75
90
Tout sit
146.0
351.8
831.0
1739.8
3236.8
sit jQuery
199.6
399.2
877.5
1779.9
3215.5
Sit wèb Vue
350.4
650.8
1280.7
2388.5
4010.8
Sit entènèt angilè
482.2
777.9
1365.5
2400.6
4171.8
Reyaji sou sit entènèt yo
508.0
1045.6
2121.1
4235.1
7444.3
Tan CPU ki gen rapò ak pwosesis script sou aparèy Desktop
Isit la ou ka wè yon bagay trè abitye.
Pou kòmanse, sit ki gen jQuery depanse siyifikativman mwens pwosesis JavaScript sou fil prensipal la pase lòt moun. Nan 10yèm percentile, konpare ak tout sit, sit jQuery sou aparèy mobil pase 61% plis tan pou trete kòd JS sou fil prensipal la. Nan ka a nan sit Desktop jQuery, tan pwosesis ogmante pa 37%. Nan 90yèm percentile, nòt sit jQuery yo trè pre nòt total yo. Espesyalman, sit jQuery sou aparèy mobil pase 1.3% mwens tan nan fil prensipal la pase tout sit, ak sou aparèy Desktop yo pase 0.7% mwens tan nan fil prensipal la.
Sou lòt bò a nan Rating nou an yo se kad ki karakterize pa chaj la pi gwo sou fil prensipal la. Sa a se, ankò, angilè ak reyaji. Sèl diferans ki genyen ant yo se ke, byenke sit angilè voye pi gwo kantite kòd nan navigatè pase sit React, li pran mwens tan CPU pou trete kòd sit angilè yo. Byen mwens.
Nan 10yèm percentile, sit Desktop Angilè depanse 230% plis tan fil prensipal pwosesis JS kòd pase tout sit. Pou sit mobil figi sa a se 313%. Sit React gen pi move pèfòmans. Sou aparèy Desktop yo pase 248% plis tan pou trete kòd pase tout sit, epi sou aparèy mobil yo pase 658% plis tan pou trete kòd. 658% se pa yon typo. Nan 10yèm percentile, sit React pase 2.7 segonn nan tan fil prensipal yo ap trete kòd ki egziste deja yo.
Nimewo 90yèm percentile yo gade omwen yon ti kras pi bon lè yo konpare ak nimewo gwo sa yo. Pwojè angilè, konpare ak tout sit, pase 29% plis tan nan fil prensipal la sou aparèy Desktop, ak 27% plis tan sou aparèy mobil. Nan ka a nan sit React, endikatè ki sanble sanble 130% ak 98%, respektivman.
Pousantaj devyasyon yo pou 90yèm percentil la sanble pi bon pase valè menm jan an pou 10yèm percentil la. Men, isit la li vo sonje ke nimewo yo ki endike tan yo sanble byen pè. Ann di - 20.8 segonn nan fil prensipal yon aparèy mobil pou yon sit ki bati sou React. (Mwen kwè ke istwa a nan sa ki aktyèlman k ap pase pandan tan sa a se merite pou yon atik separe).
Gen yon sèl konplikasyon potansyèl isit la (mèsi pou atire atansyon mwen sou karakteristik sa a, ak ak anpil atansyon egzamine done yo soti nan pwen de vi sa a). Reyalite a se ke anpil sit itilize plizyè zouti front-end. An patikilye, mwen te wè yon anpil nan sit itilize jQuery ansanm ak React oswa Vue kòm sit sa yo imigre soti nan jQuery nan lòt kad oswa bibliyotèk. Kòm yon rezilta, mwen te tounen nan baz done a, fwa sa a chwazi sèlman lyen sa yo ki koresponn ak sit ki te itilize sèlman React, jQuery, Angular oswa Vue, men se pa nenpòt konbinezon de yo. Men sa mwen te resevwa.
Tan processeur (an milisgond) ki gen rapò ak pwosesis script sou aparèy mobil nan sitiyasyon kote sit yo itilize yon sèl kad oswa yon sèl bibliyotèk.
Persantil
10
25
50
75
90
Sit ki itilize sèlman jQuery
542.9
1062.2
2297.4
4769.7
8718.2
Sit ki itilize sèlman Vue
944.0
1716.3
3194.7
5959.6
9843.8
Sit ki itilize sèlman Angilè
1328.9
2151.9
3695.3
6629.3
11607.7
Sit wèb ki itilize sèlman React
2443.2
4620.5
10061.4
17074.3
24956.3
Tan processeur ki gen rapò ak pwosesis scripts sou aparèy mobil nan yon sitiyasyon kote sit yo itilize yon sèl kad, oswa yon sèl bibliyotèk.
Premyèman, yon bagay ki pa etone: lè yon sit sèvi ak yon sèl kad oswa yon sèl bibliyotèk, pèfòmans nan yon sit sa a amelyore pi souvan pase pa. Pèfòmans pou chak enstriman sanble pi bon nan 10yèm ak 25yèm percentile yo. Li fè sans. Yon sit ki fèt ak yon sèl kad ta dwe pi vit pase yon sit ki fèt lè l sèvi avèk de oswa plis kad oswa bibliyotèk.
An reyalite, nòt yo pou chak zouti devan nou egzamine yo te sanble pi bon nan tout ka yo, ak yon sèl eksepsyon kirye. Ki sa ki etone m 'te ke nan 50yèm percentile ak pi wo a, sit ki itilize React fè pi mal lè React se bibliyotèk la sèlman yo itilize. Sa a, nan chemen an, se te rezon ki fè mwen prezante done sa yo isit la.
Sa a se yon ti kras etranj, men mwen pral toujou eseye chèche yon eksplikasyon pou etranj sa a.
Si yon pwojè sèvi ak tou de React ak jQuery, Lè sa a, pwojè sa a gen plis chans yon kote nan mwatye nan pwosesis la nan migrasyon soti nan jQuery React. Petèt li gen yon baz kod kote bibliyotèk sa yo melanje. Depi nou te deja wè ke sit jQuery pase mwens tan sou fil prensipal la pase sit React, sa ka di nou ke mete ann aplikasyon kèk fonksyonalite nan jQuery ede amelyore pèfòmans sit la yon ti kras.
Men, kòm pwojè a deplase soti nan jQuery React ak konte pi plis ak plis sou React, sitiyasyon an chanje. Si sit la fèt ak bon jan kalite vrèman segondè, epi devlopè sit yo itilize React ak anpil atansyon, Lè sa a, tout bagay pral byen ak yon sit konsa. Men, pou sit React an mwayèn, anpil itilizasyon React vle di ke fil prensipal la sijè a ogmante chaj.
Diferans ki genyen ant aparèy mobil ak Desktop
Yon lòt fason mwen gade done yo se te eksplore ki jan gwo diferans ki genyen ant eksperyans mobil ak Desktop. Si nou pale sou konpare komèsan yo nan kòd JavaScript, Lè sa a, tankou yon konparezon pa revele anyen terib. Natirèlman, li ta bon pou wè pi piti kantite kòd telechaje, men pa gen anpil diferans nan kantite lajan an nan kòd mobil ak Desktop.
Men, si ou analize tan ki nesesè pou trete kòd la, yon diferans trè gwo ant aparèy mobil ak Desktop vin aparan.
Ogmantasyon nan tan (an pousantaj) ki gen rapò ak pwosesis script sou aparèy mobil konpare ak sa yo Desktop
Persantil
10
25
50
75
90
Tout sit
144.1
172.8
185.5
208.5
224.0
sit jQuery
188.2
187.4
191.3
209.6
221.9
Sit wèb Vue
222.5
220.8
220.2
221.4
220.4
Sit entènèt angilè
205.1
206.0
201.6
210.4
218.7
Reyaji sou sit entènèt yo
431.5
386.8
337.9
242.6
179.6
Pandan ke yo ta dwe atann kèk diferans nan vitès pwosesis kòd ant yon telefòn ak yon laptop, gwo nimewo sa yo di m ke kad modèn yo pa vize ase nan aparèy ki ba-pouvwa ak dezi a fèmen espas sa a ki te idantifye. Menm nan 10yèm percentile, sit React pase 431.5% plis tan sou fil prensipal mobil lan pase sou fil prensipal Desktop la. jQuery gen espas ki pi piti a, men menm isit la figi ki koresponn lan se 188.2%. Lè devlopè sit entènèt yo fè pwojè yo nan yon fason ke yo mande plis tan CPU pou trete yo (e sa a se sa k ap pase, epi li sèlman vin pi mal sou tan), pwopriyetè aparèy ki ba-pouvwa gen pou peye pou li.
Rezilta
Bon kad yo ta dwe bay devlopè yo yon bon fondasyon pou bati pwojè entènèt (an tèm de sekirite, aksè, pèfòmans), oswa yo ta dwe gen restriksyon entegre ki fè li difisil yo kreye yon bagay ki vyole restriksyon sa yo.
Sa a pa sanble aplike nan pèfòmans nan pwojè entènèt (ak aparamman nan yo ).
Li enpòtan pou remake ke jis paske sit React oswa Angular pase plis tan CPU pou prepare kòd pase lòt moun pa nesesèman vle di sit React yo plis CPU-entansif pase sit Vue lè yo kouri. An reyalite, done nou te gade yo pa di anpil sou pèfòmans operasyon kad ak bibliyotèk yo. Yo pale plis sou apwòch devlopman ke, konsyans oswa ou pa, kad sa yo ka pouse pwogramè yo nan direksyon. Nou ap pale de dokiman pou kad, ekosistèm yo, ak teknik devlopman komen.
Li la tou vo mansyone yon bagay ke nou pa t 'analize isit la, sètadi, konbyen tan aparèy la depanse egzekite kòd JavaScript lè tranzisyon ant paj nan sit la. Agiman an favè SPA se ke yon fwa aplikasyon an yon sèl paj chaje nan navigatè a, itilizatè a pral, an teyori, kapab jwenn aksè nan paj sit la pi vit. Eksperyans pwòp mwen di m 'ke sa a se byen lwen soti nan yon reyalite. Men, nou pa gen done pou klarifye pwoblèm sa a.
Ki sa ki klè se ke si ou itilize yon fondasyon oswa bibliyotèk pou kreye yon sit entènèt, w ap fè yon konpwomi an tèm de okòmansman chaje pwojè a ak prepare li pou ale. Sa a aplike menm nan senaryo ki pi pozitif.
Li posib pou fè kèk konpwomi nan sitiyasyon ki apwopriye, men li enpòtan pou devlopè yo fè konpwomi sa yo konsyan.
Men, nou tou gen rezon pou optimis. Mwen ankouraje m paske devlopè Chrome yo ap travay byen ak moun ki dèyè kèk nan zouti devan nou te kouvri pou ede amelyore pèfòmans zouti sa yo.
Sepandan, mwen se yon moun pragmatik. Nouvo achitekti kreye pwoblèm pèfòmans osi souvan ke yo rezoud yo. Epi li pran tan pou elimine enpèfeksyon yo. Menm jan nou pa ta dwe atann sa pral rezoud tout pwoblèm pèfòmans, ou pa ta dwe atann sa a soti nan nouvo vèsyon nan kad pi renmen nou an.
Si ou vle sèvi ak youn nan zouti devan yo diskite nan materyèl sa a, sa vle di ke w ap gen pou fè plis efò pou asire ke, fortwit, ou pa mal pèfòmans nan pwojè ou a. Men kèk konsiderasyon pou konsidere anvan ou kòmanse sèvi ak yon nouvo kad:
- Tcheke tèt ou ak bon sans. Èske ou reyèlman bezwen sèvi ak kad ou chwazi a? Pi JavaScript ka fè anpil jodi a.
- Èske gen yon altènatif pi lejè nan kad ou chwazi a (tankou Preact, Svelte oswa yon lòt bagay) ki ka ba ou 90% nan kapasite yo nan kad sa a?
- Si w ap itilize deja yon kad, reflechi sou si gen yon bagay ki ofri pi bon, plis konsèvatif, opsyon estanda (pa egzanp, Nuxt.js olye de Vue, Next.js olye de React, elatriye).
- Ki sa ki pral ou Pèfòmans JavaScript?
- Ki jan ou kapab pwosesis devlopman pou fè li pi difisil pou prezante plis kòd JavaScript nan yon pwojè pase sa ki absoliman nesesè?
- Si w ap itilize yon fondasyon pou fasilite devlopman, konsidere voye kòd kad bay kliyan yo. Petèt ou ka rezoud tout pwoblèm yo sou sèvè a?
Anjeneral, ide sa yo vo pran yon gade pi pre, kèlkeswa sa egzakteman ou chwazi pou devlope fen devan an. Men, yo espesyalman enpòtan lè w ap travay sou yon pwojè ki manke pèfòmans pou kòmanse.
Chè lektè! Ki sa ou wè kòm fondasyon JavaScript ideyal la?
Sous: www.habr.com