Ùn ci hè micca un modu più veloce per rallentà un situ web (senza punizione) ch'è per eseguisce una mansa di codice JavaScript nantu à questu. Quandu utilizate JavaScript, avete da pagà per ellu in u rendiment di u prughjettu almenu quattru volte. Eccu ciò chì u codice JavaScript di u situ carica i sistemi di l'utilizatori:
- Caricà un schedariu nantu à a reta.
- Analisi è compilazione di u codice fonte unpacked dopu a scaricamentu.
- Esecuzione di codice JavaScript.
- Cunsumu di memoria.
Sta cumminazzioni risulta esse .
È includemu più è più codice JS in i nostri prughjetti. Cume l'urganisazioni avanzanu versu siti alimentati da frameworks è biblioteche cum'è React, Vue è altri, facemu a funziunalità core di i siti assai dipendente da JavaScript.
Aghju vistu assai siti web assai pesanti chì utilizanu frameworks JavaScript. Ma a mo visione di u prublema hè assai biased. U fattu hè chì l'imprese cù u travagliu venenu à mè precisamente perchè anu prublemi cumplessi di rendiment di u situ web. In u risultatu, sò diventatu curiosu di sapè quantu hè diffusa stu prublema, è chì "multi" pagamu quandu avemu sceltu unu o un altru quadru cum'è a basa per un certu situ.
Stu prughjettu m'hà aiutatu à capisce questu. .
dati
U prughjettu HTTP Archive traccia un totale di 4308655 ligami à i siti di desktop regulare è 5484239 ligami à i siti mobile. Trà i numerosi indicatori assuciati cù sti ligami hè una lista di tecnulugii truvati in i siti currispondenti. Questu significa chì pudemu campionà millaie di siti chì utilizanu diversi frameworks è biblioteche è amparà quantu codice mandanu à i clienti è quanta carica chì u codice mette nantu à i sistemi di l'utilizatori.
Aghju cullucatu dati da marzu 2020, chì era i dati più recenti chì aghju avutu accessu.
Aghju decisu di paragunà i dati di l'Archiviu HTTP aggregatu per tutti i siti cù e dati per i siti truvati chì utilizanu React, Vue è Angular, ancu s'ellu hà cunsideratu ancu aduprà altre materiale fonte.
Per fà più interessante, aghju aghjustatu ancu siti chì utilizanu jQuery à u settore di dati fonte. Sta biblioteca hè sempre assai populari. Introduce ancu un accostu à u sviluppu di u situ web chì difiere da u mudellu di l'Applicazione Single Page (SPA) offertu da React, Vue è Angular.
Ligami in l'Archiviu HTTP chì rapprisentanu siti chì sò stati trovati chì utilizanu tecnulugia di interessu per noi
Framework o biblioteca
Ligami à i siti mobile
Ligami à i siti regulari
jQuery
4615474
3714643
React
489827
241023
Vue
85649
43691
Angular
19423
18088
Speranze è sogni
Prima di passà à analizà e dati, vogliu parlà di ciò chì vogliu sperà.
Credu chì in un mondu ideale, i frameworks andavanu oltre à risponde à i bisogni di i sviluppatori è furniscenu qualchi beneficii concreti à l'utilizatori di ogni ghjornu di i nostri siti. A produtividade hè solu unu di quelli benefici. L'accessibilità è a sicurità venenu ancu in mente quì. Ma questu hè solu u più impurtante.
Dunque, in un mondu ideale, un tipu di quadru deve fà più faciule per creà un situ web d'altu rendiment. Questu deve esse fattu sia per u fattu chì u quadru dà à u sviluppatore una basa decentu nantu à quale custruisce un prughjettu, o per u fattu chì impone restrizioni à u sviluppu, mettendu esigenze per questu chì facenu difficiule di sviluppà qualcosa. chì diventa lentu.
I megliu frameworks duveranu fà i dui: furnisce una bona basa, è impone restrizioni à u travagliu chì permettenu di ottene un risultatu decentu.
Analizà i valori mediani di e dati ùn ci darà micca l'infurmazioni chì avemu bisognu. È, in fattu, stu approcciu lascia fora di a nostra attenzione . Invece, aghju derivatu punteggi percentile da e dati chì aghju avutu. Quessi sò i 10, 25, 50 (mediana), 75, 90 percentiles.
Sò particularmente interessatu in u 10 è u 90 percentile. U 10 percentile rapprisenta u megliu rendimentu (o almenu più o menu vicinu à u megliu) per un quadru particulari. In altri palori, questu significa chì solu u 10% di i siti chì utilizanu un quadru particulari righjunghjinu stu livellu, o un livellu più altu. U percentile 90, invece, hè l'altra parte di a munita - ci mostra quantu e cose pò esse male. U percentile 90 hè i siti di traccia - l'ultimi 10% di i siti chì anu u più grande quantità di codice JS o u più longu tempu necessariu per processà u so codice nantu à u filu principale.
Volumi di codice JavaScript
Per principià, hè sensu per analizà a dimensione di u codice JavaScript trasmessu da diversi siti nantu à a reta.
A quantità di codice JavaScript (KB) trasferitu à i dispositi mobili
Percentiles
10
25
50
75
90
Tutti i siti
93.4
196.6
413.5
746.8
1201.6
siti jQuery
110.3
219.8
430.4
748.6
1162.3
siti web Vue
244.7
409.3
692.1
1065.5
1570.7
I siti web angulari
445.1
675.6
1066.4
1761.5
2893.2
Reagisce i siti web
345.8
441.6
690.3
1238.5
1893.6
A quantità di codice JavaScript mandatu à i dispositi mobili
A quantità di codice JavaScript (KB) trasferitu à i dispositi desktop
Percentiles
10
25
50
75
90
Tutti i siti
105.5
226.6
450.4
808.8
1267.3
siti jQuery
121.7
242.2
458.3
803.4
1235.3
siti web Vue
248.0
420.1
718.0
1122.5
1643.1
I siti web angulari
468.8
716.9
1144.2
1930.0
3283.1
Reagisce i siti web
308.6
469.0
841.9
1472.2
2197.8
A quantità di codice JavaScript trasferitu à i dispositi desktop
Se parlemu solu di a dimensione di u codice JS chì i siti mandanu à i dispositi, allora tuttu s'assumiglia cum'è puderebbe aspittà. Vale à dì, se unu di i frameworks hè utilizatu, questu significa chì ancu in una situazione ideale, u voluminu di codice JavaScript per u situ aumenterà. Questu ùn hè micca surprisante - ùn pudete micca fà un framework JavaScript a basa di un situ è aspetta chì a quantità di codice JS per u prugettu serà assai bassu.
Ciò chì hè interessante di sta dati hè chì certi frameworks è biblioteche ponu esse cunsiderate megliu punti di partenza per un prughjettu cà l'altri. I siti web cù jQuery sò megliu. I so siti di desktop cuntenenu 15% più JavaScript chì tutti i siti, è i so siti mobile cuntenenu 18% più JavaScript. (Certamente, ci hè un pocu skew in i dati quì. U fattu hè chì jQuery hè prisente nantu à parechji siti, per quessa, hè naturali chì tali siti sò più stretti cù u numeru tutale di siti chì l'altri. Tuttavia, questu ùn affetta micca cumu. i dati di fonte sò output per ogni framework).
Mentre chì a crescita di codice 15-18% hè una figura significativa, paragunata à l'altri quadri è biblioteche, l'impositu imposta da jQuery hè assai bassu. I siti angulari in u 10 percentile mandanu 344% più di dati à i dispositi desktop cà tutti i siti, è 377% più à i dispositi mobili. I siti React sò u prossimu più pesante, mandendu 193% più codice à i dispositi desktop cà tutti i siti, è 270% più à i dispositi mobili.
Aghju menzionatu prima chì, ancu s'è l'usu di un framework significa chì una certa quantità di codice serà inclusa in u prugettu à u principiu di u travagliu nantu à questu, spergu chì u quadru pò limità in qualchì manera u sviluppatore. In particulare, parlemu di limità a quantità massima di codice.
Ciò chì hè interessante hè chì i siti jQuery seguitanu sta idea. Ancu s'ellu, à u nivellu di u percentile 10, sò ligeramente più pesanti di tutti i siti (da 15-18%), à u livellu di u percentile 90, sò un pocu più ligeru di tutti i siti - da circa 3% in versioni desktop è mobile. Questu ùn hè micca per dì chì questu hè un benefiziu assai significativu, ma pò esse dichjaratu chì i siti jQuery almenu ùn anu micca grandi dimensioni di codice JavaScript ancu in e so versioni più grande.
Ma u listessu ùn si pò dì di altri quadri.
Cum'è in u casu di u percentile 10, à i siti di percentile 90 nantu à Angular and React sò diffirenti di l'altri siti, ma sfurtunatamenti, per u peghju.
À u percentile 90, i siti Angular mandanu 141% di più dati à i dispositi mobili chì tutti i siti, è 159% più à i dispositi desktop. I siti React mandanu 73% di più à i dispositi desktop cà tutti i siti, è 58% di più à i dispositi mobili. A dimensione di codice di i siti React à u percentile 90 hè 2197.8 KB. Questu significa chì sti siti mandanu 322.9 KB di più dati à i dispositi mobili chì i so cuncurrenti più vicini basati in Vue. U distaccu trà i siti desktop basati in Angular and React è altri siti hè ancu più grande. Per esempiu, i siti desktop React mandanu 554.7 KB di più codice JS à i dispusitivi chè siti Vue simili.
U tempu impiegatu per processà u codice JavaScript nantu à u filu principale
I dati sopra indicanu chjaramente chì i siti chì utilizanu i frameworks è e biblioteche studiate cuntenenu grandi quantità di codice JavaScript. Ma, sicuru, questu hè solu una parte di a nostra equazioni.
Dopu chì u codice JavaScript hè ghjuntu in u navigatore, deve esse purtatu in un statu di travagliu. In particulare parechji prublemi sò causati da quelli azzioni chì anu da esse realizatu cù u codice in u filu principale di u navigatore. U filu principale hè rispunsevuli di processà l'azzioni di l'utilizatori, calculà stili, è custruisce è affissà u layout di pagina. Se sguassate u filu principale cù e funzioni JavaScript, ùn avarà micca l'uppurtunità di compie altre attività in una manera puntuale. Questu porta à ritardi è "freni" in u funziunamentu di e pagine.
A basa di dati di l'Archiviu HTTP cuntene infurmazione nantu à quantu tempu ci vole à processà u codice JavaScript nantu à u filu principale di u mutore V8. Questu significa chì pudemu cullà sti dati è amparà quantu tempu u filu principale piglia per processà u JavaScript di diversi siti.
U tempu di CPU (in millisecondi) in relazione à u processu di script in i dispositi mobili
Percentiles
10
25
50
75
90
Tutti i siti
356.4
959.7
2372.1
5367.3
10485.8
siti jQuery
575.3
1147.4
2555.9
5511.0
10349.4
siti web Vue
1130.0
2087.9
4100.4
7676.1
12849.4
I siti web angulari
1471.3
2380.1
4118.6
7450.8
13296.4
Reagisce i siti web
2700.1
5090.3
9287.6
14509.6
20813.3
U tempu di CPU in relazione à u processu di script in i dispositi mobili
U tempu di CPU (in millisecondi) in relazione à u processu di script in i dispositi desktop
Percentiles
10
25
50
75
90
Tutti i siti
146.0
351.8
831.0
1739.8
3236.8
siti jQuery
199.6
399.2
877.5
1779.9
3215.5
siti web Vue
350.4
650.8
1280.7
2388.5
4010.8
I siti web angulari
482.2
777.9
1365.5
2400.6
4171.8
Reagisce i siti web
508.0
1045.6
2121.1
4235.1
7444.3
U tempu di CPU in relazione à u processu di script in i dispositi desktop
Quì pudete vede qualcosa assai familiar.
Per principianti, i siti cù jQuery passanu significativamente menu processà JavaScript in u filu principale cà l'altri. À u percentile 10, paragunatu à tutti i siti, i siti jQuery nantu à i dispositi mobili passanu 61% di più tempu à processà u codice JS nantu à u filu principale. In u casu di i siti desktop jQuery, u tempu di trasfurmazioni aumenta da 37%. À u percentile 90, i punteggi di i siti jQuery sò assai vicinu à i punteggi aggregati. In particulare, i siti jQuery nantu à i dispositi mobili passanu 1.3% menu tempu in u filu principale di tutti i siti, è in i dispositi desktop passanu 0.7% menu tempu in u filu principale.
Da l'altra parte di a nostra valutazione ci sò frames chì sò carattarizati da a più grande carica nantu à u filu principale. Questu hè, di novu, Angular and React. L'unica diffarenza trà elli hè chì, ancu i siti Angular mandanu quantità più grande di codice à i navigatori chì i siti React, ci vole menu tempu CPU per processà u codice di i siti Angular. Assai menu.
À u percentile 10, i siti di desktop Angular passanu 230% di più di u tempu di filu principale chì processanu u codice JS cà tutti i siti. Per i siti mobili sta cifra hè 313%. I siti React anu u peghju performance. Nant'à i dispositi desktop passanu 248% di più tempu à trasfurmà u codice di tutti i siti, è in i dispositi mobili passanu 658% più tempu à trasfurmà u codice. 658% ùn hè micca un typo. À u 10 percentile, i siti di React passanu 2.7 seconde di u tempu di filu principalu chì processanu u so codice esistente.
I numeri di 90 percentile parenu almenu un pocu megliu quandu paragunatu à questi numeri enormi. I prughjetti angulari, cumparatu cù tutti i siti, passanu 29% di più tempu in u filu principale nantu à i dispositi desktop, è 27% più tempu in i dispositi mobili. In u casu di i siti React, l'indicatori simili pareanu 130% è 98%, rispettivamente.
I percentile di deviazione per u percentile 90 parenu megliu cà i valori simili per u percentile 10. Ma quì vale a pena ricurdà chì i numeri chì indicanu u tempu parenu abbastanza spaventosi. Dicemu - 20.8 seconde in u filu principale di un dispositivu mobile per un situ custruitu nantu à React. (Credu chì a storia di ciò chì succede veramente in questu tempu hè degna di un articulu separatu).
Ci hè una cumplicità potenziale quì (grazie per attirà a mo attenzione à sta funzione, è per esaminà currettamente i dati da questu puntu di vista). U fattu hè chì parechji siti utilizanu parechji strumenti di front-end. In particulare, aghju vistu assai siti chì utilizanu jQuery à fiancu di React o Vue cum'è questi siti migrate da jQuery à altri frameworks o biblioteche. In u risultatu, aghju vultatu à a basa di dati, sta volta selezziunate solu quelli ligami chì currispondenu à i siti chì anu utilizatu solu React, jQuery, Angular o Vue, ma micca una cumminazione di elli. Eccu ciò chì aghju avutu.
U tempu di processore (in millisecondi) in relazione à u processu di script in i dispositi mobili in situazioni induve i siti usanu solu un quadru o una sola biblioteca
Percentiles
10
25
50
75
90
Siti chì utilizanu solu jQuery
542.9
1062.2
2297.4
4769.7
8718.2
Siti chì utilizanu solu Vue
944.0
1716.3
3194.7
5959.6
9843.8
Siti chì utilizanu solu Angular
1328.9
2151.9
3695.3
6629.3
11607.7
I siti web chì utilizanu solu React
2443.2
4620.5
10061.4
17074.3
24956.3
U tempu di u processatore in relazione à i script di trasfurmazioni in i dispositi mobili in una situazione induve i siti usanu solu un quadru, o una sola biblioteca
Prima, qualcosa chì ùn hè micca surprisante: quandu un situ usa solu un quadru o una biblioteca, u funziunamentu di un tali situ migliurà più spessu chè micca. U rendiment per ogni strumentu vede megliu à u 10 è u 25 percentile. Hè sensu. Un situ chì hè fattu cù un quadru deve esse più veloce di un situ chì hè fattu cù dui o più frameworks o biblioteche.
In fatti, i punteggi per ogni strumentu di front-end chì avemu esaminatu parevanu megliu in tutti i casi, cù una curiosa eccezzioni. Ciò chì m'hà sorpresu hè chì à u percentile 50 è sopra, i siti chì utilizanu React facenu peghju quandu React hè l'unica biblioteca chì utilizanu. Questu, per via, era u mutivu chì aghju prisentatu sta dati quì.
Questu hè un pocu stranu, ma sempre pruvà à circà una spiegazione per questa stranezza.
Se un prughjettu usa sia React è jQuery, allora quellu prughjettu hè più prubabile in un locu à mità di u prucessu di migrazione da jQuery à React. Forsi hà una basa di codice in quale queste biblioteche sò mischiate. Siccomu avemu digià vistu chì i siti jQuery passanu menu tempu nantu à u filu principale cà i siti React, questu pò dì chì l'implementazione di qualchì funziunalità in jQuery aiuta à migliurà un pocu u rendiment di u situ.
Ma cum'è u prughjettu si move da jQuery à React è si basa di più in più in React, a situazione cambia. Se u situ hè fattu cù una qualità veramente alta, è i sviluppatori di u situ utilizanu React cun cura, allora tuttu serà bè cù un tali situ. Ma per u situ mediu React, l'usu estensivu di React significa chì u filu principale hè sottumessu à una carica aumentata.
A distanza trà i dispositi mobili è desktop
Un altru modu chì aghju guardatu i dati era di scopre quantu hè grande a distanza trà l'esperienze mobili è desktop. Se parlemu di paragunà i volumi di codice JavaScript, allura un tali paraguni ùn palesa nunda terribili. Di sicuru, saria bellu di vede quantità più chjuche di codice scaricabile, ma ùn ci hè micca assai diffarenza in a quantità di codice mobile è desktop.
Ma s'è analizate u tempu necessariu per processà u codice, una distanza assai grande trà i dispositi mobili è desktop diventa notevuli.
Aumentu di u tempu (in percentuale) in relazione à u processu di script in i dispositi mobili paragunatu à quelli di desktop
Percentiles
10
25
50
75
90
Tutti i siti
144.1
172.8
185.5
208.5
224.0
siti jQuery
188.2
187.4
191.3
209.6
221.9
siti web Vue
222.5
220.8
220.2
221.4
220.4
I siti web angulari
205.1
206.0
201.6
210.4
218.7
Reagisce i siti web
431.5
386.8
337.9
242.6
179.6
Mentre chì una certa diffarenza in a velocità di trasfurmazioni di codice trà un telefunu è un laptop hè da esse esperta, tali numeri cusì grande mi dicenu chì i quadri muderni ùn sò micca destinati abbastanza à i dispositi di bassa putenza è u desideriu di chjude a distanza chì hè stata identificata. Ancu à u percentile 10, i siti di React passanu 431.5% di più tempu nantu à u filu principale mobile chì in u filu principale di u desktop. jQuery hà u più chjucu gap, ma ancu quì a figura currispondente hè 188.2%. Quandu i sviluppatori di u situ web facenu i so prughjetti in tale manera chì necessitanu più tempu di CPU per processà (è questu hè ciò chì succede, è solu s'aggrava cù u tempu), i pruprietarii di i dispositi di bassa putenza anu da pagà per questu.
Risultati
I boni frameworks duveranu dà à i sviluppatori una bona fundazione per a custruzzione di prughjetti web (in termini di sicurezza, accessibilità, prestazione), o deve avè restrizioni integrate chì facenu difficiule di creà qualcosa chì viola queste restrizioni.
Questu ùn pare micca applicà à a prestazione di i prughjetti web (è apparentemente à i so ).
Hè vale a pena nutà chì solu perchè i siti React o Angular passanu più tempu di CPU à preparà u codice di l'altri ùn significa micca necessariamente chì i siti React sò più intensivi di CPU chì i siti Vue quandu si currianu. In fatti, i dati chì avemu vistu dicenu assai pocu nantu à u funziunamentu di u funziunamentu di i frameworks è di e biblioteche. Parlanu più nantu à l'avvicinamenti di u sviluppu chì, cunsciendu o micca, sti frameworks ponu spinghje i programatori. Parlemu di ducumentazione per i quadri, u so ecosistema, è e tecniche di sviluppu cumuni.
Hè vale a pena menziunà qualcosa chì ùn avemu micca analizatu quì, vale à dì, quantu tempu u dispusitivu passa à eseguisce codice JavaScript quandu si passa trà e pagine di u situ. L'argumentu in favore di SPA hè chì una volta chì l'applicazione di una sola pagina hè caricata in u navigatore, l'utilizatore, in teoria, puderà accede à e pagine di u situ più veloce. A mo propria sperienza mi dice chì questu hè luntanu da un fattu. Ma ùn avemu micca dati per chjarificà stu prublema.
Ciò chì hè chjaru hè chì se utilizate un quadru o una biblioteca per creà un situ web, fate un cumprumissu in quantu à caricare inizialmente u prugettu è prestu prestu per andà. Questu hè applicà ancu à i scenarii più pusitivi.
Hè pussibule di fà qualchì cumprumissu in situazioni appropritate, ma hè impurtante chì i sviluppatori facenu tali cumprumessi in cunscienza.
Ma avemu ancu ragiò di ottimisimu. Sò incuraghjitu da quantu vicinu i sviluppatori di Chrome travaglianu cù quelli chì sò daretu à alcuni di l'arnesi di front-end chì avemu coperto per aiutà à migliurà a prestazione di questi strumenti.
Tuttavia, sò una persona pragmatica. I novi architetture creanu prublemi di rendiment quantunque i risolvenu. È ci vole u tempu per eliminà i difetti. Cum'è ùn duvemu micca aspittà chì risolverà tutti i prublemi di rendiment, ùn deve micca aspittà questu da e novi versioni di i nostri frameworks preferiti.
Se vulete usà unu di l'arnesi di front-end discututi in questu materiale, questu significa chì avete da fà sforzi supplementari per assicurà chì, incidentalmente, ùn fate micca dannà u rendiment di u vostru prughjettu. Eccu alcuni considerazioni per cunsiderà prima di cumincià à aduprà un novu framework:
- Verificate sè stessu cù u sensu cumunu. Avete veramente bisognu di utilizà u vostru quadru sceltu? Pure JavaScript pò fà assai oghje.
- Ci hè una alternativa più ligera à u quadru di a vostra scelta (cum'è Preact, Svelte o qualcosa altru) chì vi pò dà 90% di e capacità di quellu quadru?
- Sè vo site digià utilizendu un framework, pensate s'ellu ci hè qualcosa chì offre megliu, più cunservatore, opzioni standard (per esempiu, Nuxt.js invece di Vue, Next.js invece di React, etc.).
- Chì serà u vostru Prestazione JavaScript?
- Cumu pudete prucessu di sviluppu per rende più difficiuli d'introduce più codice JavaScript in un prughjettu di ciò chì hè assolutamente necessariu?
- Sè vo aduprate un framework per facilità di sviluppu, cunzidira mandà u codice framework à i clienti. Forsi pudete risolve tutti i prublemi nantu à u servitore?
Di solitu, sti idee valenu a pena guardà più attente, indipendentemente da ciò chì esattamente sceglite per sviluppà u front end. Ma sò soprattuttu impurtanti quandu travagliate nantu à un prughjettu chì manca di prestazione per cumincià.
Beni, lettori! Chì vede cum'è u framework JavaScript ideale?
Source: www.habr.com