áááºááá¯ááºáá áºáá¯ááœáẠJavaScript áá¯ááºáá»á¬ážá áœá¬ááᯠáá¯ááºáá±á¬ááºááŒááºážááẠáááºááá¯ááºáá áºáá¯á¡á¬áž ááŸá±ážááœá±ážá á±ááẠ(áááºááá·áºáááºááœááºáá»ááºá០ááá«ááŸááá«) ááá¯ááá¯ááŒááºáááºáá±á¬áááºážáááºážáááŸááá«á JavaScript ááá¯á¡áá¯á¶ážááŒá¯áá²á·á¡áá«á ááá±á¬áá»ááºá áœááºážáá±á¬ááºáááºá¡ááœáẠá¡áááºážáá¯á¶áž áá±ážááŒáááºáá±ážáá»á±ááá«áááºá á€áááºááŸá¬ áááºááá¯ááºá JavaScript áá¯ááºááẠáá¯á¶ážá áœá²áá°áá»á¬ážá á áá áºáá»á¬ážááᯠáááºáá±ážáááº-
- ááœááºáááºáá±á«áºááœáẠááá¯ááºáá áºáᯠáááºááŒááºážá
- áá±á«ááºážáá¯ááºáá¯ááºááŒá®ážáá±á¬áẠáá¯ááºááá¯ážáá¬ážáá±á¬ á¡áááºážá¡ááŒá áºáá¯ááºááᯠááœá²ááŒááºážá áááºááŒá¬ááŒá®áž á á¯á ááºážáá«á
- JavaScript áá¯ááºááᯠáá¯ááºáá±á¬ááºáá±áááºá
- ááŸááºáá¬ááºáá¯á¶ážá áœá²ááŸá¯á
á€áá±á«ááºážá
ááºááŸá¯ááŸááœááºááŸáá·áº
ááá¯á·á¡ááŒáẠáá»áœááºá¯ááºááá¯á·ááẠáá»áœááºá¯ááºááá¯á·áááá±á¬áá»ááºáá»á¬ážááœáẠJS áá¯ááºááᯠááá¯áá»á¬ážáá¬á á±áááºá á¡ááœá²á·á¡á ááºážáá»á¬ážááẠReactá Vue ááŸáá·áº á¡ááŒá¬ážá¡áá¬áá»á¬ážáá²á·ááá¯á· áá°áá±á¬ááºáá»á¬ážááŸáá·áº á á¬ááŒáá·áºááá¯ááºáá»á¬áž áá¶á·ááá¯ážáá±ážáá¬ážáá±á¬ ááá¯ááºáá»á¬ážáá®ááá¯á· ááœá±á·áá»á¬ážáá¬áááºááŸáá·áºá¡áá»áŸá áá»áœááºá¯ááºááá¯á·ááẠááá¯ááºáá»á¬ážá á¡ááááá¯ááºáá±á¬ááºááá¯ááºá áœááºážááᯠJavaScript áá±á«áºááœáẠá¡ááœááºáá°áááºáá±áá«áááºá
JavaScript frameworks ááœá±áá¯á¶ážááŒá®áž á¡áááºážáá±ážáá¶áá²á· áááºááá¯ááºááœá± á¡áá»á¬ážááŒá®ážááᯠááœá±á·áá°ážáááºá áá«áá±ááá·áº áá®ááá á¹á áá²á· áááºáááºááŒá®áž áá»áœááºáá±á¬á·áºá¡ááŒááºááá±á¬á· ááŒááºážááŒááºážáááºááẠáááºááá¯ááºáá±áá«áááºá á¡ááŸááºááŸá¬ áá»áœááºáá±á¬áºááŸáá·áº á¡áá¯ááºáá¯ááºáá±á¬ áá¯áá¹ááá®áá»á¬ážááẠááŸá¯ááºááœá±ážáá±á¬ áááºááá¯ááºá áœááºážáá±á¬ááºááẠááŒá¿áá¬áá»á¬áž ááŸááá±áá±á¬ááŒá±á¬áá·áº áá»áœááºá¯ááºáᶠá¡ááá¡áá» áá¬áááŒááºáž ááŒá áºáá«áááºá ááááºá¡áá±ááŒáá·áºá á€ááŒá¿áá¬ááẠáááºáá»áŸáá»á¶á·ááŸá¶á·áááºááᯠááááá¯áá¬ááŒá®áž á¡áá»áá¯á·áá±á¬ááá¯ááºáá áºáá¯á¡ááœáẠá¡ááŒá±áá¶á¡ááŒá Ạáá áºáᯠááá¯á·ááá¯áẠá¡ááŒá¬ážáá°áá±á¬ááºááᯠááœá±ážáá»ááºáá±á¬á¡áá« áá»áœááºá¯ááºááá¯á·ááẠá¡ááẠ"áááºááŒá±ážáá»á¬áž" áá±ážáá±á¬ááºáááºááᯠááááá¯áá¬áááºá
áá®ááá±á¬áá»ááºá áá«ááᯠá¡ááŒá±ááŸá¬ááá¯á· áá°áá®áá±ážáá²á·áááºá
áá±áá¬
HTTP Archive ááá±á¬áá»ááºááẠáá¯á¶ááŸáẠdesktop ááá¯ááºáá»á¬ážááá¯á· ááá·áºááºáá±á«ááºáž á,ááá,áá á ááá·áºááºáá»á¬ážááŸáá·áº ááá¯ááá¯ááºážááá¯ááºáá»á¬ážááá¯á· ááá·áºáẠá ,ááá,ááá ááá·áºááºáá»á¬ážááᯠááŒá±áá¬áá¶áááºá á€ááá·áºááºáá»á¬ážááŸáá·áºáááºá ááºáá±á¬ ááœáŸááºááááºážáá»á¬ážá áœá¬ááŸáááá·áºá¡ááẠáááºááá¯ááºáá¬áááºááá¯ááºáá»á¬ážááœáẠááœá±á·ááŸááááá·áº áááºážááá¬á á¬áááºážáá áºáá¯ááŒá áºáááºá ááá¯ááá¯áááºááŸá¬ áá»áœááºá¯ááºááá¯á·ááẠááá°áá®áá±á¬ frameworks áá»á¬ážááŸáá·áº libraries áá»á¬ážááá¯á¡áá¯á¶ážááŒá¯ááá·áº áá±á¬ááºáá±á«ááºážáá»á¬ážá áœá¬áá±á¬ sites áá»á¬ážááᯠááá°áá¬áá°ááá¯ááºááŒá®áž clients áá»á¬ážáᶠáá¯ááºáááºáá»áŸáá±ážááá¯á·áᬠá¡áá¯á¶ážááŒá¯áá°áá»á¬ážáá áá áºáá»á¬ážáá±á«áºááœáẠááá¯áá¯ááºááᯠload áááºáá»áŸáá±ážáááºááᯠáá±á·áá¬ááá¯ááºáá«áááºá
2020 áá¯ááŸá Ạáááºáá០áá±áá¬ááᯠá á¯áá±á¬ááºážáá²á·ááŒá®ážá áááºážááẠáá»áœááºá¯ááºá¡áá¯á¶ážááŒá¯ááœáá·áºááá²á·áá±á¬ áá±á¬ááºáá¯á¶ážáá±áá¬ááŒá áºáááºá
Reactá Vue ááŸáá·áº Angular ááá¯á¡áá¯á¶ážááŒá¯áá¬ážááá·áºááá¯ááºáá»á¬ážá¡ááœáẠá á¯á ááºážáá¬ážáá±á¬ HTTP Archive áá±áá¬ááᯠááá¯ááºá¡á¬ážáá¯á¶ážá¡ááœáẠááŸáá¯ááºážááŸááºááẠáá¯á¶ážááŒááºáá²á·áááº
ááá¯á áááºáááºá á¬ážááá¯á·áá±á¬ááºážá¡á±á¬ááºá á¡áááºážá¡ááŒá áºáá±áá¬á¡á á¯á¶ááŸá¬ jQuery ááá¯áá¯á¶ážáá²á·ááá¯ááºááœá±ááá¯áááºáž ááá·áºááá¯ááºáááºá á€á á¬ááŒáá·áºááá¯ááºááẠá¡ááœááºáá¬áááºááŒá®ážáá²ááŒá áºáááºá áááºážááẠReactá Vue ááŸáá·áº Angular ááŸáá±ážáá±á¬ááºáá±á¬ Single Page Application (SPA) áá±á¬áºáááºááŸáá·áºááá°ááá·áº áááºááá¯ááºáááºáá±á¬ááºáá±ážááá¯ááºáᬠáá»ááºážáááºáááºážááá¯áááºáž ááááºáááºáá±ážáá«áááºá
áá»áœááºá¯ááºááá¯á·á áááºáááºá á¬ážáá±á¬ áááºážááá¬áá»á¬ážááᯠá¡áá¯á¶ážááŒá¯áá±ááŒá±á¬ááºáž ááœá±á·ááŸááá¬ážáá±á¬ ááá¯ááºáá»á¬ážááᯠááá¯ááºá á¬ážááŒá¯ááá·áº HTTP ááŸááºáááºážááŸá ááá·áºááºáá»á¬áž
áá°áá±á¬áẠááá¯á·ááá¯áẠá
á¬ááŒáá·áºááá¯ááº
ááá¯ááá¯ááºážááá¯ááºáá»á¬ážááá¯á· ááá·áºááºáá»á¬áž
áá¯á¶ááŸááºááá¯ááºáá»á¬ážááá¯á· ááá·áºááºáá»á¬áž
jQuery
4615474
3714643
áá¯á¶á·ááŒááº
489827
241023
Vue
85649
43691
angular
19423
18088
áá»áŸá±á¬áºááá·áºáá»ááºááŸáá·áº á¡áááºáááºáá»á¬áž
áá±áá¬ááᯠááœá²ááŒááºážá áááºááŒá¬ááŒááºážáááŒá¯áá®á áá»áœááºá¯ááºááẠáá»áŸá±á¬áºááá·áºááá¯ááá·áºá¡áá¬á¡ááŒá±á¬ááºáž ááœá±ážááœá±ážááá¯áá«áááºá
á á¶ááŒááá¹áá¬áá áºáá¯ááœááºá áá°áá±á¬ááºáá»á¬ážááẠáá±á¬á·ááºáá²áá±ážáá¬ážáá°áá»á¬ážá ááá¯á¡ááºáá»ááºáá»á¬ážááᯠááŒáá·áºáááºážáá±ážááŒá®áž áá»áœááºá¯ááºááá¯á·áááá¯ááºáá»á¬ážááá±á·á ááºá¡áá¯á¶ážááŒá¯áá°áá»á¬ážá¡ááœáẠááá¯ááºáá¬áá±á¬á¡áá»áá¯ážáá»á±ážáá°ážá¡áá»áá¯á·ááᯠáá±ážá áœááºážááá¯ááºáááºáᯠáá¯á¶ááŒááºáá«áááºá áá¯ááºáá¯ááºá áœááºážá¡á¬ážááẠááá¯á¡áá»áá¯ážáá»á±ážáá°ážáá»á¬ážáá²á០áá áºáá¯áá¬ááŒá áºáááºá áá¯á¶ážá áœá²ááá¯ááºááŸá¯ááŸáá·áº áá±ážáááºážááŸá¯ááá¯á·ááá¯áááºáž á€áá±áá¬ááœáẠáááááá«á áá«áá±ááá·áº áá«á á¡áá±ážááŒá®ážáá¯á¶ážá¡áá¬áá²áá±á
ááá¯á·ááŒá±á¬áá·áºá á á¶ááŒááá¹áá¬áá áºáá¯ááœááºá á¡áá»áá¯á·áá±á¬ áá°áá±á¬ááºáá»á¬ážááẠá áœááºážáá±á¬ááºáááºááŒáá·áºáá¬ážáá±á¬ áááºááá¯ááºáá áºáá¯ááᯠáááºáá®ážááẠááá¯ááá¯ááœááºáá°á á±ááá·áºáááºá áá°áá±á¬ááºááẠdeveloper á¡á¬áž ááá±á¬áá»ááºáá áºáá¯áááºáá±á¬ááºááẠááá·áºááá·áºáá»á±á¬ááºáááºáá±á¬á¡ááŒá±áá¶ááᯠáá±ážá áœááºážááá¯ááºáá±á¬ááŒá±á¬áá·áº ááá¯á·ááá¯áẠááœá¶á·ááŒáá¯ážááá¯ážáááºááŸá¯á¡áá±á«áº ááá·áºáááºáá»ááºáá»á¬áž áá»ááŸááºáá¬ážáá±á¬ááŒá±á¬áá·áº áá áºáá¯áá¯ááᯠááœá¶á·ááŒáá¯ážááá¯ážáááºááẠáááºáá²á á±áá±á¬ ááá¯á¡ááºáá»ááºáá»á¬ážááᯠááŸá±á·áááºážáááºáᬠáááºážááᯠáá¯ááºáá±á¬ááºááá·áºáááºá ááŸá±ážááœá±ážáááºá
á¡áá±á¬ááºážáá¯á¶ážáá°áá±á¬ááºáá»á¬ážááẠááŸá áºáá¯á áá¯á¶ážááᯠáá¯ááºáá±á¬ááºááá·áºáááº- áá±á¬ááºážáá±á¬á¡ááŒá±áá¶áá áºáá¯áá±ážáᬠááá·áºá¡á¬áž ááá·áºááá·áºáá»á±á¬ááºáááºáá±á¬ááááºááá¯áááŸáá á±ááá·áº á¡áá¯ááºá¡áá±á«áº ááá·áºáááºáá»ááºáá»á¬ážáá»ááŸááºáá«á
áá±áá¬áá»á¬ážá áá»ááºážáá»áŸáááºááá¯ážáá»á¬ážááᯠááœá²ááŒááºážá
áááºááŒá¬ááŒááºážááŒáá·áº áá»áœááºá¯ááºááá¯á·ááá¯á¡ááºáá±á¬ á¡áá»ááºá¡áááºááᯠáá±ážáááºááá¯ááºáá«á ááááºáá±á¬á·á áá®áá»ááºážáááºááŸá¯á áá»áœááºá¯ááºááá¯á·áá²á·á¡á¬áá¯á¶ááᯠáá»á±á¬áºááœááºááœá¬ážá
á±áá«áááºá
10th áá²á· 90 percentiles ááœá±ááᯠá¡áá°ážá áááºáááºá á¬ážáá«áááºá 10th percentile ááẠáá®ážááŒá¬ážáá°áá±á¬ááºáá áºáá¯á¡ááœáẠá¡áá±á¬ááºážáá¯á¶ážá áœááºážáá±á¬ááºááẠ(ááá¯á·ááá¯áẠá¡áááºážáá¯á¶áž á¡áá®ážá ááºáá¯á¶áž ááá¯á·ááá¯áẠá¡áááºážá¡áá»ááºáž) ááᯠááá¯ááºá á¬ážááŒá¯áááºá áá áºáááºážááá¯ááá±á¬áºá áá°áá±á¬ááºáá áºáá¯ááᯠá¡áá¯á¶ážááŒá¯ááá·áºááá¯ááºáá»á¬ážá 10% ááᬠá€á¡ááá·áºááá¯á· áá±á¬ááºááŸáááœá¬ážáááºáᯠááá¯ááá¯áááºá á¡ááŒá¬ážáá áºáááºááœááºá 90th áá¬ááá¯ááºááŸá¯ááºážááẠá¡ááŒáœá±á á±á·áá¡ááŒá¬ážáá áºáááºááŒá áºááẠ- áááºážááẠáá»áœááºá¯ááºááá¯á·á¡á¬áž áááºáá»áŸááá¯ážááœá¬ážáá±á¬á¡áá¬áá»á¬ážááŒá áºááá¯ááºáááºááá¯ááŒááááºá áá¬ááá¯ááºááŸá¯ááºáž 90 ááẠJS áá¯áẠááá¬á á¡áá»á¬ážáá¯á¶ážááŸááá±á¬ ááá¯ááºáá»á¬ážá áá±á¬ááºáá¯á¶áž 10% ááá¯á·ááá¯áẠáááºáá á¬ááœá²ááœáẠáááºážááá¯á·á áá¯ááºááᯠáá¯ááºáá±á¬ááºááẠá¡áá»áááºá¡ááŒá¬áá¯á¶áž ááá¯á¡ááºááá·áº áá±á¬ááºááá¯ááºááá¯ááºáá»á¬ážááŒá áºáááºá
JavaScript áá¯ááºá¡ááœá²áá»á¬áž
á¡á ááá¯ááºážááœááºá ááœááºáááºáá±á«áºááŸá ááá°áá®áá±á¬ááá¯ááºáá»á¬ážá០ááá¯á·ááœáŸááºáá±á¬ JavaScript áá¯ááºáá¡ááœááºá¡á á¬ážááᯠááá¯ááºážááŒá¬ážá áááºááŒá¬ááẠá¡áááá¹áá¬ááºááŸááááºá
JavaScript áá¯áẠ(KB) ááá¬áááᯠááá¯ááá¯ááºážá ááºáá á¹á ááºážáá»á¬ážááá¯á· ááœáŸá²ááŒá±á¬ááºážáá±ážáááºá
áá¬ááá¯ááºááŸá¯ááºážáá»á¬áž
10
25
50
75
90
ááá¯ááºááœá± á¡á¬ážáá¯á¶áž
93.4
196.6
413.5
746.8
1201.6
jQuery ááá¯ááºáá»á¬áž
110.3
219.8
430.4
748.6
1162.3
Vue áááºááá¯ááºáá»á¬áž
244.7
409.3
692.1
1065.5
1570.7
áá»á®ážáááºážááá¯ááºáá»á¬áž
445.1
675.6
1066.4
1761.5
2893.2
áááºááá¯ááºáá»á¬ážááᯠáá¯á¶á·ááŒááºáá«á
345.8
441.6
690.3
1238.5
1893.6
ááá¯ááá¯ááºážá
ááºáá
á¹á
ááºážáá»á¬ážááá¯á· áá±ážááá¯á·ááá·áº JavaScript áá¯ááºááá¬á
JavaScript áá¯áẠ(KB) ááá¬áááᯠdesktop á ááºáá»á¬ážááá¯á· ááœáŸá²ááŒá±á¬ááºážáá±ážáááºá
áá¬ááá¯ááºááŸá¯ááºážáá»á¬áž
10
25
50
75
90
ááá¯ááºááœá± á¡á¬ážáá¯á¶áž
105.5
226.6
450.4
808.8
1267.3
jQuery ááá¯ááºáá»á¬áž
121.7
242.2
458.3
803.4
1235.3
Vue áááºááá¯ááºáá»á¬áž
248.0
420.1
718.0
1122.5
1643.1
áá»á®ážáááºážááá¯ááºáá»á¬áž
468.8
716.9
1144.2
1930.0
3283.1
áááºááá¯ááºáá»á¬ážááᯠáá¯á¶á·ááŒááºáá«á
308.6
469.0
841.9
1472.2
2197.8
áááºá
áºáá±á¬á· á
ááºáá
á¹á
ááºážáá»á¬ážááá¯á· ááœáŸá²ááŒá±á¬ááºážáá¬ážáá±á¬ JavaScript áá¯ááºááá¬á
áááºááá¯ááºáá»á¬ážá០á ááºáá»á¬ážááá¯á· áá±ážááá¯á·áá±á¬ JS áá¯ááºá á¡ááœááºá¡á á¬ážá¡ááŒá±á¬ááºážáᬠááŒá±á¬ááá¯áá«áá á¡áá¬á¡á¬ážáá¯á¶ážááẠáááºáá»áŸá±á¬áºááá·áºáá¬ážááá·áºá¡ááá¯ááºáž ááŒá áºáááá·áºáááºá ááá¯ááá¯áááºááŸá¬á áá°áá±á¬ááºáá»á¬ážáá²á០áá áºáá¯ááᯠá¡áá¯á¶ážááŒá¯áá«áá á á¶ááŒá¡ááŒá±á¡áá±ááœááºáááºá site á¡ááœáẠJavaScript áá¯ááºááá¬á ááá¯ážáá¬áááºáᯠááá¯ááá¯áááºá áááºážááẠá¡á¶á·ááŒá áá¬ááá¯ááºáá« - ááá¯ááºáá áºáá¯á á¡ááŒá±áᶠJavaScript áá°áá±á¬ááºáá áºáá¯ááᯠáááºáááŒá¯áá¯ááºááá¯ááºáá² ááá±á¬áá»ááºá¡ááœáẠJS áá¯ááºááá¬á á¡ááœááºáááºážáá«ážáááá·áºáááºáᯠáá»áŸá±á¬áºááá·áºáá«áááºá
á€áá±áá¬ááŸáá·áºáááºáááºá á áááºáááºá á¬ážá áá¬áá±á¬ááºážáááºááŸá¬ á¡áá»áá¯á·áá±á¬ áá°áá±á¬ááºáá»á¬ážááŸáá·áº á á¬ááŒáá·áºááá¯ááºáá»á¬ážááẠááá±á¬áá»ááºáá áºáá¯á¡ááœáẠá¡ááŒá¬ážá¡áá¬áá»á¬ážááẠááá¯ááá¯áá±á¬ááºážááœááºááá·áº á¡á ááŒá¯ááá·áºá¡áá»ááºáá»á¬ážáᯠáá°áááá¯ááºáá«áááºá jQuery áá«áá±á¬ áááºááá¯ááºáá»á¬ážááẠá¡áá±á¬ááºážáá¯á¶ážááŒá áºáááºá áááºážááá¯á·á áááºá áºáá±á¬á·ááá¯ááºáá»á¬ážááœáẠááá¯ááºá¡á¬ážáá¯á¶ážááẠJavaScript 15% ááá¯áá«áááºááŒá®áž áááºážááá¯á·á ááá¯ááá¯ááºážááá¯ááºáá»á¬ážááœáẠ18% JavaScript ááá¯áá«áááºá (áááºáá¶áááºááŸá¬á á€áá±áá¬ááœáẠáá±áá¬á¡áá»áá¯á·ááŸá¬ ááœá²ááŸá¬ážáá±áá«áááºá á¡ááŸááºááŸá¬ jQuery ááẠááá¯ááºáá»á¬ážá áœá¬ááœáẠááŸááá±áá±á¬ááŒá±á¬áá·áºá ááá¯ááá¯ááºáá»á¬ážááẠá¡ááŒá¬ážááá¯ááºáá»á¬ážááẠá á¯á á¯áá±á«ááºážááá¯ááºá¡áá±á¡ááœááºááŸáá·áº ááá¯ááá¯áá®ážáááºá áœá¬ áááºá ááºáá±áááºááŸá¬ ááá¬ááá»áá«áááºá ááá¯á·áá±á¬áº áááºážááẠáááºááá¯á·áá»áŸ áááºáá±á¬ááºááŸá¯áááŸááá«á á¡áááºážá¡ááŒá áºáá±áá¬ááẠframework áá áºáá¯á á®á¡ááœáẠoutput ááŒá áºáááºá)
15-18% áá¯ááºááá¯ážáááºááŸá¯ááẠáááá¬áááºááŸá¬ážáá±á¬ ááááºážááááºážááŒá áºáá±á¬áºáááºážá á¡ááŒá¬ážáá°áá±á¬ááºáá»á¬ážááŸáá·áº á á¬ááŒáá·áºááá¯ááºáá»á¬ážááŸáá·áº ááŸáá¯ááºážááŸááºáá«á jQuery á០áá»ááŸááºáá±á¬ á¡ááœááºááẠá¡ááœááºáááºážáá«ážáá«áááºá 10th áá¬ááá¯ááºááŸá¯ááºážááŸá Angular ááá¯ááºáá»á¬ážááẠááá¯ááºá¡á¬ážáá¯á¶ážááẠdesktop á ááºáá»á¬ážááá¯á· áá±áᬠ344% ááá¯ááá¯á·ááŒááŒá®áž 377% ááẠááá¯ááá¯ááºážááºá ááºáá á¹á ááºážáá»á¬ážááá¯á· ááá¯ááá¯á·ááŒáááºá React ááá¯ááºáá»á¬ážááẠáááºááá¯ááºá¡á¬ážáá¯á¶ážááẠ193% ááá¯áá±á¬áá¯ááºáá»á¬ážááᯠáááºá áºáá±á¬á·á ááºáá»á¬ážááá¯á· áá±ážááá¯á·ááŒááºážááŸáá·áº ááá¯ááá¯ááºážá ááºáá á¹á ááºážáá»á¬ážááá¯á· 270% ááá¯áá»á¬ážáááºá
framework ááá¯á¡áá¯á¶ážááŒá¯ááŒá®áž á¡á ááŸá¬ ááá±á¬áá»ááºá¡á ááŸá¬ áá¯ááºá¡áá»áá¯á·áá«áááºáááºááá¯á· ááá¯ááá¯áá±ááá·áº framework á developer ááᯠáá áºáááºážáááºážáá²á· ááá·áºáááºááá¯ááºáááºááá¯á· áá»áŸá±á¬áºááá·áºáá«áááºá á¡áá°ážáááŒáá·áºá áá»áœááºá¯ááºááá¯á·ááẠáá¯ááºá á¡áá»á¬ážáá¯á¶ážááá¬áááᯠááá·áºáááºááŒááºážá¡ááŒá±á¬ááºáž ááŒá±á¬áá±áá«áááºá
á áááºáááºá á¬ážá áá¬áá±á¬ááºážáá¬á jQuery ááá¯ááºááœá±á áá®á¡ááŒá¶á¡á ááºááᯠááá¯ááºáá¬áá¬áá²á 10th áá¬ááá¯ááºááŸá¯ááºážá¡ááá·áºááœáẠáááºážááá¯á·ááẠááá¯ááºá¡á¬ážáá¯á¶ážááẠá¡áááºážáááºááá¯áá±ážáá±á¬áºáááºáž (15-18%)á áááºážááá¯á·ááẠ90th áá¬ááá¯ááºááŸá¯ááºážá¡ááá·áºááœáẠáááºážááá¯á·ááẠááá¯ááºá¡á¬ážáá¯á¶ážááẠá¡áááºážáááºáá±á«á·ááẠ- desktop ááŸáá·áº mobile versions ááŸá áºáá¯áá¯á¶ážááœáẠ3% ááá·áºááŒá áºáááºá áááºážááẠá¡ááœááºáááá¬áááºááŸá¬ážáá±á¬ á¡áá»áá¯ážáá»á±ážáá°ážáá áºáá¯áᯠáááá¯ááá¯áá±á¬áºáááºáž jQuery ááá¯ááºáá»á¬ážááœáẠáááºážááá¯á·á á¡ááŒá®ážáá¯á¶ážáá¬ážááŸááºážáá»á¬ážááœááºááẠááŒá®ážáá¬ážáá±á¬ JavaScript áá¯ááºá¡ááœááºá¡á á¬ážáá»á¬áž áááŸááᯠááá¯ááá¯ááºáá«áááºá
áá«áá±ááá·áº áááŒá¬ážáá°áá±á¬ááºááœá±ááŸá¬áá±á¬á· áá®ááá¯áá² ááŒá±á¬ááá¯á·áááá«áá°ážá
10th percentile ááœááºáá²á·ááá¯á·ááẠAngular ááŸáá·áº React ááŸá 90th percentile sites áá»á¬ážááœáẠá¡ááŒá¬ážáá±á¬ site áá»á¬ážááŸáá·áº ááœá²ááŒá¬ážáá±á¬áºáááºáž ááá¯ááá¯ážáááºááŸá¬ áá¶ááá±á¬ááºážá áœá¬ááŒáá·áº ááœá¬ááŒá¬ážáá«áááºá
áá¬ááá¯ááºááŸá¯ááºáž 90 ááœááºá Angular ááá¯ááºáá»á¬ážááẠáááºááá¯ááºá¡á¬ážáá¯á¶ážááẠááá¯ááá¯ááºážá ááºáá á¹á ááºážáá»á¬ážááá¯á· áá±áᬠ141% ááá¯ááá¯áá±ážááá¯á·ááŒááŒá®áž áááºá áºáá±á¬á·áááááá¬áá»á¬ážáᶠ159% ááá¯áá»á¬ážáááºá áá¯á¶á·ááŒááºááá·áºááá¯ááºáá»á¬ážááẠáááºááá¯ááºá¡á¬ážáá¯á¶ážááẠáááºá áá±á¬á·á ááºáá»á¬ážáᶠ73% ááá¯ááá¯á·ááŒááŒá®áž 58% ááẠááá¯ááá¯ááºážáááááá¬áá»á¬ážááá¯á· ááá¯ááá¯á·ááŒáááºá 90th áá¬ááá¯ááºááŸá¯ááºážááŸá React ááá¯ááºáá»á¬ážá áá¯ááºá¡ááœááºá¡á á¬ážááẠ2197.8 KB ááŒá áºáááºá ááá¯ááá¯áááºááŸá¬ á€ááá¯ááºáá»á¬ážááẠáááºážááá¯á·á á¡áá®ážá ááºáá¯á¶áž Vue-based ááŒáá¯ááºáááºáá»á¬ážááẠ322.9 KB ááá¯ááá¯ááºážáá á¹á ááºážáá»á¬ážáᶠáá±áá¬ááá¯ááá¯áá±ážááá¯á·ááá¯ááºáááºáᯠááá¯ááá¯áááºá Angular ááŸáá·áº React ááá¯á¡ááŒá±áá¶ááá·áº áááºá áºáá±á¬á·ááá¯ááºáá»á¬ážááŸáá·áº á¡ááŒá¬ážááá¯ááºáá»á¬ážááŒá¬áž ááœá¬ááá»ááºááŸá¬ ááá¯áááŒá®ážáá¬ážáá«áááºá á¥ááá¬á¡á¬ážááŒáá·áºá React áááºá áºáá±á¬á·ááá¯ááºáá»á¬ážááẠá¡áá¬ážáá° Vue ááá¯ááºáá»á¬ážááẠ554.7 KB ááá¯áá»á¬ážáá±á¬ JS áá¯ááºááᯠá ááºáá á¹á ááºážáá»á¬ážááá¯á· ááá¯á·áá±ážáááºá
áááºáá á¬ááœá²ááœáẠJavaScript áá¯ááºááᯠáá¯ááºáá±á¬ááºááẠá¡áá»áááºáá°áááºá
á¡áááºáá±á¬áºááŒáá« á¡áá»ááºá¡áááºáá»á¬ážááẠáá±á·áá¬áá¬ážáá±á¬ áá°áá±á¬ááºáá»á¬ážááŸáá·áº á á¬ááŒáá·áºááá¯ááºáá»á¬ážááᯠá¡áá¯á¶ážááŒá¯ááá·áº ááá¯ááºáá»á¬ážááœáẠJavaScript áá¯áẠá¡ááŒá±á¬ááºá¡ááŒá¬áž áá«áááºááŒá±á¬ááºáž ááŸááºážááŸááºážáááºážáááºáž áá±á¬áºááŒáááºá ááá¯á·áá±á¬áºá á€áááºááŸá¬ áá»áœááºá¯ááºááá¯á·ááá®áá»áŸááŒááºážá á¡á áááºá¡ááá¯ááºážáá áºáá¯áá¬ááŒá áºáááºá
JavaScript áá¯ááºááẠááá±á¬ááºáá¬ááá¯á·áá±á¬ááºááŸáááŒá®ážáá±á¬ááºá áááºážááᯠá¡áá¯ááºáá¯ááºááá·áºá¡ááŒá±á¡áá±ááá¯á· ááá·áºááœááºážááẠááá¯á¡ááºáááºá á¡áá°ážáááŒáá·áº áááºáááá±á¬ááºáá¬áá»ááºááœáẠáá¯ááºááŒáá·áº áá¯ááºáá±á¬ááºáááá·áº áá¯ááºáá±á¬ááºáá»ááºáá»á¬ážááŒá±á¬áá·áº ááŒá¿áá¬áá»á¬ážá áœá¬ ááŒá áºááœá¬ážáááºá áááºáá á¬ááœá²ááẠáá¯á¶ážá áœá²áá°áá¯ááºáá±á¬ááºáá»ááºáá»á¬ážááᯠáá¯ááºáá±á¬ááºáááºá áá¯á¶á á¶áá»á¬ážááᯠááœááºáá»ááºááŒááºážááŸáá·áº á á¬áá»ááºááŸá¬á¡ááŒááºá¡áááºááᯠááŒáááŒááºážááŸáá·áº áááºáá±á¬ááºááŒááºážááá¯á·á¡ááœáẠáá¬áááºááŸááááºá á¡áááºá áááºááẠáááºáá á¬ááœá²ááᯠJavaScript áá¯ááºáá±á¬ááºá áá¬áá»á¬ážááŒáá·áº ááœáŸááºážááá¯ážáá¬ážáá«áá áááºážááẠá¡ááŒá¬ážáá¯ááºáá±á¬ááºá áá¬áá»á¬ážááᯠá¡áá»áááºáá®ááŒá®ážááŒá±á¬ááºááẠá¡ááœáá·áºá¡áá±ážááŸááááºááá¯ááºáá«á áááºážááẠá á¬áá»ááºááŸá¬áá»á¬ážáááºáááºááŸá¯ááœáẠááŸá±á¬áá·áºááŸá±ážááŒááºážááŸáá·áº âáááááºáá»á¬ážâ ááᯠááŒá áºá á±áááºá
HTTP Archive áá±áá¬áá±á·á áºááœáẠV8 á¡ááºáá»ááºá á¡áááá¡ááŒá±á¬ááºážá¡áá¬ááœáẠJavaScript áá¯ááºááᯠáá¯ááºáá±á¬ááºááẠá¡áá»áááºáááºáá»áŸááŒá¬ááŒá±á¬ááºáž á¡áá»ááºá¡áááºáá»á¬áž áá«ááŸááááºá ááá¯ááá¯áááºááŸá¬ áá»áœááºá¯ááºááá¯á·ááẠá€áá±áá¬ááᯠá á¯áá±á¬ááºážááá¯ááºááŒá®áž áááºááá¯ááºá¡áá»áá¯ážáá»áá¯ážá JavaScript ááᯠáá¯ááºáá±á¬ááºááẠáááºáá á¬ááœá²ááẠá¡áá»áááºáááºáá»áŸááŒá¬áááºááᯠáá±á·áá¬ááá¯ááºáááºá
ááá¯ááá¯ááºážá ááºáá á¹á ááºážáá»á¬ážááœáẠscript processing ááŸáá·áºáááºá ááºáá±á¬ CPU á¡áá»ááẠ(áá®áá®á áá¹ááá·áºá¡ááœááºáž)
áá¬ááá¯ááºááŸá¯ááºážáá»á¬áž
10
25
50
75
90
ááá¯ááºááœá± á¡á¬ážáá¯á¶áž
356.4
959.7
2372.1
5367.3
10485.8
jQuery ááá¯ááºáá»á¬áž
575.3
1147.4
2555.9
5511.0
10349.4
Vue áááºááá¯ááºáá»á¬áž
1130.0
2087.9
4100.4
7676.1
12849.4
áá»á®ážáááºážááá¯ááºáá»á¬áž
1471.3
2380.1
4118.6
7450.8
13296.4
áááºááá¯ááºáá»á¬ážááᯠáá¯á¶á·ááŒááºáá«á
2700.1
5090.3
9287.6
14509.6
20813.3
ááá¯ááá¯ááºážá
ááºáá
á¹á
ááºážáá»á¬ážááœáẠscript processing ááŸáá·áºáááºá
ááºáá±á¬ CPU á¡áá»áááº
desktop á ááºáá á¹á ááºážáá»á¬ážááœáẠscript processing ááŸáá·áºáááºá ááºáá±á¬ CPU á¡áá»ááẠ(áá®áá®á áá¹ááá·áºá¡ááœááºáž)
áá¬ááá¯ááºááŸá¯ááºážáá»á¬áž
10
25
50
75
90
ááá¯ááºááœá± á¡á¬ážáá¯á¶áž
146.0
351.8
831.0
1739.8
3236.8
jQuery ááá¯ááºáá»á¬áž
199.6
399.2
877.5
1779.9
3215.5
Vue áááºááá¯ááºáá»á¬áž
350.4
650.8
1280.7
2388.5
4010.8
áá»á®ážáááºážááá¯ááºáá»á¬áž
482.2
777.9
1365.5
2400.6
4171.8
áááºááá¯ááºáá»á¬ážááᯠáá¯á¶á·ááŒááºáá«á
508.0
1045.6
2121.1
4235.1
7444.3
áááºá
áºáá±á¬á· á
ááºáá
á¹á
ááºážáá»á¬ážááœáẠscript processing ááŸáá·áºáááºá
ááºáá±á¬ CPU á¡áá»áááº
á€áá±áá¬ááœáẠáááºááẠá¡ááœááºáááºážááŸá®ážáá±á¬á¡áá¬áá áºáá¯ááᯠááœá±á·ááá¯ááºáááºá
á¡á ááá¯ááºážááœááºá jQuery ááŸááá±á¬ááá¯ááºáá»á¬ážááẠáááºáá á¬ááœá²ááœáẠJavaScript ááá¯áá¯ááºáá±á¬ááºáá¬ááœáẠá¡ááŒá¬ážáá°áá»á¬ážááẠáááááá¬áá¬áááºážáááºá ááá¯ááºáá»á¬ážá¡á¬ážáá¯á¶ážááŸáá·áº ááŸáá¯ááºážááŸááºáá«á 10th áá¬ááá¯ááºááŸá¯ááºážááœááºá ááá¯ááá¯ááºážá ááºáá á¹á ááºážáá»á¬ážááŸá jQuery ááá¯ááºáá»á¬ážááẠáááºáá á¬ááœá²ááœáẠJS áá¯ááºááᯠáá¯ááºáá±á¬ááºáá¬ááœáẠá¡áá»ááẠ61% ááá¯ááá¯áá¯á¶ážá áœá²áá«áááºá desktop jQuery ááá¯ááºáá»á¬ážááœáẠáá¯ááºáá±á¬ááºáá»áááºááẠáá% ááá¯ážáá¬áááºá áá¬ááá¯ááºááŸá¯ááºáž 37 ááœááºá jQuery ááá¯ááºáá»á¬ážá áááŸááºáá»á¬ážááẠá á¯á á¯áá±á«ááºážáááŸááºáá»á¬ážááŸáá·áº á¡ááœááºáá®ážá ááºáá«áááºá á¡áá°ážáááŒáá·áºá ááá¯ááá¯ááºážá ááºáá á¹á ááºážáá»á¬ážááŸá jQuery ááá¯ááºáá»á¬ážááẠááá¯ááºá¡á¬ážáá¯á¶ážááẠáááºáá¡ááŒá±á¬ááºážá¡áá¬ááœáẠá¡áá»ááẠ90% áá»á±á¬á·áááºážááŒá®áž desktop á ááºáá»á¬ážááœáẠáááºážááá¯á·ááẠmain thread ááœáẠá¡áá»ááẠ1.3% áá»á±á¬á·áááºážáááºá
áá»áœááºá¯ááºááá¯á·á á¡ááá·áºáááºááŸááºááŒááºážá á¡ááŒá¬ážáá áºáááºááœááºáá°áá±á¬ááºáá»á¬ážááẠáááºáááŒáá¯ážáá±á«áºááœáẠá¡ááŒá®ážáá¬ážáá¯á¶ážáááºáá¯ááºáááºááá¯ážááŒáá·áº ááœááºááŒááºááá¹ááá¬áá»á¬ážááŒá áºáááºá á€áááºááŸá¬ Angular ááŸáá·áº React ááŒá áºáááºá áááºážááá¯á·ááŒá¬ážááŸá áá áºáá¯áááºážáá±á¬ ááŒá¬ážáá¬ážáá»ááºááŸá¬ Angular ááá¯ááºáá»á¬ážááẠReact site áá»á¬ážááẠááá±á¬ááºáá¬áá»á¬ážáᶠáá¯ááºá¡ááŒá±á¬ááºá¡áá»á¬áž áá±ážááá¯á·áá±á¬áºáááºáž Angular site áá»á¬ážá áá¯ááºááᯠáá¯ááºáá±á¬ááºááẠCPU á¡áá»áááºááá¯ááŒá¬áá«áááºá áá±ážáá»á±á¬á·áááºážá
10th áá¬ááá¯ááºááŸá¯ááºážááœááºá Angular áááºá áºáá±á¬á·ááá¯ááºáá»á¬ážááẠááá¯ááºá¡á¬ážáá¯á¶ážááẠJS áá¯ááºááᯠáá¯ááºáá±á¬ááºááá·áºá¡áá»ááẠ230% ááá¯ááá¯áá¯á¶ážá áœá²áááºá ááá¯ááá¯ááºážááá¯ááºáá»á¬ážá¡ááœáẠá€ááááºážááááºážááẠ313% ááŒá áºáááºá React sites áá»á¬ážááœáẠá¡ááá¯ážáá¯á¶ážá áœááºážáá±á¬ááºáááºááŸááááºá áááºá áá±á¬á·áááááá¬áá»á¬ážááœáẠáááºážááá¯á·ááẠáááºááá¯ááºá¡á¬ážáá¯á¶ážááẠáá¯ááºáá¯ááºáá±á¬ááºááŒááºážááẠ248% ááá¯ááá¯á¡áá¯á¶ážááŒá¯ááŒááŒá®áž ááá¯ááá¯ááºážááºá ááºáá á¹á ááºážáá»á¬ážááœáẠáááºážááá¯á·ááẠáá¯ááºáá¯ááºáá±á¬ááºáá»ááẠ658% ááá¯ááá¯áá¯á¶ážá áœá²ááŒáááºá 658% ááẠtypo ááá¯ááºáá«á 10th percentile ááœááºá React ááá¯ááºáá»á¬ážááẠáááºážááá¯á·áááŸáááŒá®ážáá¬ážáá¯ááºááᯠáá¯ááºáá±á¬ááºáááºá¡ááœáẠáááºáá¡ááŒá±á¬ááºážá¡áá¬á 2.7 á áá¹ááá·áºá¡áá»áááºááᯠáá¯á¶ážá áœá²áá«áááºá
áá áá¬ááá¯ááºááŸá¯ááºážááŒá±á¬áẠááááºážááá¬ááºážáá»á¬ážááẠá€ááŒá®ážáá¬ážáá±á¬ ááááºážááááºážáá»á¬ážááŸáá·áº ááŸáá¯ááºážááŸááºáá«á á¡áááºážáá¯á¶áž á¡áááºážááẠááá¯áá±á¬ááºážáá«áááºá ááá¯ááºá¡á¬ážáá¯á¶ážááŸáá·áº ááŸáá¯ááºážááŸááºáá«á Angular ááá±á¬áá»ááºáá»á¬ážááẠdesktop á ááºáá á¹á ááºážáá»á¬ážááœáẠáááºáá¡ááŒá±á¬ááºážá¡áá¬ááœáẠá¡áá»ááẠ90% ááá¯ááá¯áá¯á¶ážá áœá²ááŒááŒá®áž ááá¯ááá¯ááºážá ááºáá á¹á ááºážáá»á¬ážááœáẠá¡áá»ááẠ29% ááá¯áá»á¬ážáááºá React sites áá»á¬ážááœáẠá¡áá¬ážáá°á¡ááœáŸááºážáá»á¬ážááẠ27% ááŸáá·áº 130% á¡áá®ážáá®ážááŸááááºá
90th percentile á¡ááœáẠdeviation percentages ááẠ10th percentile á¡ááœáẠá¡áá¬ážáá°áááºááá¯ážáá»á¬ážááẠááá¯áá±á¬ááºážáááºá áá«áá±ááá·áº á¡áá»áááºááᯠááœáŸááºááŒáá²á· ááááºážááá¬ááºážááœá±á áá±á¬áºáá±á¬áºááŒá±á¬ááºá áá¬áá±á¬ááºážáááºááá¯á· áá®áá±áá¬ááŸá¬ ááŸááºáá¬ážááá¯ááºáá«áááºá ááá¯ááŒáá«á áá¯á· - React ááœááºáááºáá±á¬ááºáá¬ážáá±á¬ááá¯ááºá¡ááœáẠááá¯ááá¯ááºážá ááºáá á¹á ááºážáá áºáá¯á áááºáá¡ááŒá±á¬ááºážá¡áá¬ááœáẠ20.8 á áá¹ááá·áºááŒá¬áááºá (á€á¡áá»áááºá¡ááœááºáž á¡ááŸááºááááºááŒá áºáá»ááºáá±ááá·áº áá¬ááºáááºážááẠáá®ážááŒá¬ážáá±á¬ááºážáá«ážááŸáá·áº ááá¯ááºáááºáááºáᯠáá»áœááºá¯ááºáá¯á¶ááŒááºáááº)á
á€áá±áá¬ááœáẠááŒá
áºááá¯ááºáá»á±ááŸááá±á¬ áá±á¬ááºáááºááœá² ááŒá¿áá¬áá
áºáᯠááŸáááẠ(áá»á±ážáá°ážáááºáá«áááº
áááºááá¯ááºáá»á¬ážáá±á¬ááºáá áºáá¯áááºáž ááá¯á·ááá¯áẠáá áºáá»á áºááá¯ááºáá áºáá¯áá¬á¡áá¯á¶ážááŒá¯ááá·áº á¡ááŒá±á¡áá±áá»á¬ážááœáẠááá¯ááá¯ááºážáááááá¬áá»á¬ážáá±á«áºááœáẠscript processing ááŸáá·áºáááºáááºááá·áº áááá¯áááºáá¬á¡áá»ááẠ(áá®áá®á áá¹ááá·áºá¡ááœááºáž)
áá¬ááá¯ááºááŸá¯ááºážáá»á¬áž
10
25
50
75
90
jQuery ááá¯áá¬á¡áá¯á¶ážááŒá¯áá±á¬ááá¯ááºáá»á¬áž
542.9
1062.2
2297.4
4769.7
8718.2
Vue ááá¯áá¬áá¯á¶ážááá·áºááá¯ááºáá»á¬áž
944.0
1716.3
3194.7
5959.6
9843.8
Angular ááá¯áá¬á¡áá¯á¶ážááŒá¯áá±á¬ááá¯ááºáá»á¬áž
1328.9
2151.9
3695.3
6629.3
11607.7
React ááá¯áá¬áá¯á¶ážáá±á¬ áááºááá¯ááºáá»á¬áž
2443.2
4620.5
10061.4
17074.3
24956.3
áááºááá¯ááºáá»á¬ážááẠáá°áá±á¬ááºáá
áºáᯠ(ááá¯á·) áá
áºáá»á
áºááá¯ááºáá
áºáá¯áᬠá¡áá¯á¶ážááŒá¯ááá·áº á¡ááŒá±á¡áá±ááœáẠááá¯ááá¯ááºážáááááá¬áá»á¬ážáá±á«áºááœáẠscripts áá»á¬ážáá¯ááºáá±á¬ááºááŒááºážááá¯ááºáᬠáááá¯áááºáá¬á¡áá»áááº
áááá¡áá»ááºááŸá¬ á¡á¶á·ááŒá áá¬ááá¯ááºáá«- áááºááá¯ááºáá áºáá¯ááẠáá°áá±á¬ááºáá áºáᯠááá¯á·ááá¯áẠáá áºáá»á áºááá¯ááºáá áºáá¯ááá¯áᬠá¡áá¯á¶ážááŒá¯áá±á¬á¡áá«á ááá¯ááá¯ááºáá áœááºážáá±á¬ááºáááºááẠáááŒá¬ááááá¯áááᯠááá¯ážáááºáá¬áááºá áá°áááá¬áá áºáá¯á á®á¡ááœáẠá áœááºážáá±á¬ááºáááºááẠ10th ááŸáá·áº 25th percentiles ááœáẠááá¯áá±á¬ááºážáááºá á¡á²áá«á á¡áááá¹áá¬ááºááŸááááºá áá°áá±á¬ááºáá áºáá¯ááᯠá¡áá¯á¶ážááŒá¯á ááŒá¯áá¯ááºáá¬ážáá±á¬ áááºááá¯ááºáá áºáá¯ááẠáá±á¬ááºááŸá áºáᯠááá¯á·ááá¯áẠá á¬ááŒáá·áºááá¯áẠááá¯á·ááá¯áẠá á¬ááŒáá·áºááá¯ááºááŸá áºáᯠááá¯á·ááá¯áẠááŸá áºáá¯áááºááá¯áá±á¬ áá±á¬ááºáá»á¬ážááᯠá¡áá¯á¶ážááŒá¯áá¬ážááá·áº áááºááá¯ááºááẠááá¯ááŒááºááá·áºáááºá
á¡ááŸááºááŸá¬á áá»áœááºá¯ááºááá¯á· áááºážá á áºáá¬ážáá±á¬ ááŸá±á·áá¯á¶ážáááááá¬ááá¯ááºážá¡ááœáẠáááŸááºáá»á¬ážááẠáááá»ááºáá±á¬ááŒáœááºážáá»ááºáá áºáá¯ááŒáá·áº ááá á¹á áááºááá¯ááºážááœáẠááá¯áá±á¬ááºážáááºá á¡á¶á·á¡á¬ážááá·áºá áá¬ááŸá¬ 50th áá¬ááá¯ááºááŸá¯ááºážááŸáá·áºá¡áááºááœáẠReact ááá¯á¡áá¯á¶ážááŒá¯ááá·áºááá¯ááºáá»á¬ážááẠReact ááẠáááºážááá¯á·á¡áá¯á¶ážááŒá¯ááá·áºáá áºáá¯áááºážáá±á¬á á¬ááŒáá·áºááá¯ááºááŒá áºáá±á¬á¡áá« ááá¯ááá¯ážááœá¬ážááŒááºážááŒá áºáááºá á€á¡áá»ááºááᯠá€áá±áá¬ááœáẠáá»áœááºá¯ááºáááºááŒáááŒááºážá á¡ááŒá±á¬ááºážá¡áááºážááŒá áºáá²á·áá«áááºá
áá«á áááºážáááºážáá±á¬á· áá°ážáááºážáá±ááá·áº áá®áá°ážáááºážááŸá¯á¡ááœáẠááŸááºážááŒáá»ááºááᯠááŸá¬ááá¯á· ááŒáá¯ážá á¬ážáá±áá¯ááºážáá«áá²á
ááá±á¬áá»ááºáá áºáá¯ááẠReact ááŸáá·áº jQuery ááŸá áºáá»áá¯ážáá¯á¶ážááᯠá¡áá¯á¶ážááŒá¯áá«áá ááá¯ááá±á¬áá»ááºááẠjQuery á០React ááá¯á· ááŒá±á¬ááºážááœáŸá±á·ááŒááºážáá¯ááºáááºážá ááºááœáẠáá áºáááºáá áºáá»ááºááŒá áºááá¯ááºáááºá á€á á¬ááŒáá·áºááá¯ááºáá»á¬áž áá±á¬ááŸá±á¬áá¬ážááá·áº áá¯ááºáá±á·á áºáá áºáᯠáá°á·ááœáẠááŒá áºááá¯ááºáááºá jQuery ááá¯ááºáá»á¬ážááẠReact sites áá»á¬ážááẠmain thread ááœáẠá¡áá»áááºááá¯áááºážáááºááᯠáá»áœááºá¯ááºááá¯á· ááŒááºááŒá®ážááŒá®ááŒá áºáá±á¬ááŒá±á¬áá·áº jQuery ááœáẠáá¯ááºáá±á¬ááºáá»ááºá¡áá»áá¯á·ááᯠá¡áá±á¬ááºá¡áááºáá±á¬áºááŒááºážááŒáá·áº ááá¯ááºá áœááºážáá±á¬ááºáááºááᯠá¡áááºážáááºááŒáŸáá·áºáááºáá±ážááŒá±á¬ááºáž áá»áœááºá¯ááºááá¯á·ááᯠááŒá±á¬ááŒááá¯ááºáá«áááºá
ááá¯á·áá±á¬áº ááá±á¬áá»ááºááẠjQuery á០React ááá¯á·ááŒá±á¬ááºážááœá¬ážááŒá®áž React áá±á«áºááœáẠááá¯áááá¯á á¡á¬ážááá¯ážáá¬áááºááŸáá·áºá¡áá»áŸ á¡ááŒá±á¡áá±ááẠááŒá±á¬ááºážáá²áá¬áááºá á¡áááºá áááºááá¯ááºááᯠá¡ááŸááºáááẠá¡áááºá¡ááœá±ážááŒáá·áºá áœá¬ááŒáá·áº ááŒá¯áá¯ááºáá¬ážááŒá®ážá ááá¯áẠdeveloper áá»á¬ážá React ááᯠááá¯áá áá¯ááºá¡áá¯á¶ážááŒá¯áá«áá ááá¯ááá¯ááºááŸáá·áº á¡á¬ážáá¯á¶áž á¡áááºááŒá±ááœá¬ážáá«áááºá ááá¯á·áá±á¬áº áá»ááºážáá»áŸ React site á¡ááœáẠReact ááᯠáá»ááºáá»ááºááŒáá·áºááŒáá·áºá¡áá¯á¶ážááŒá¯ááŒááºážááẠáááºáááŒáá¯ážááẠáááºááá¯ážáá¬ááŸá¯ááᯠáá¶ááááºáᯠááá¯ááá¯áááºá
ááá¯ááá¯ááºážááŸáá·áº desktop á ááºáá á¹á ááºážáá»á¬ážááŒá¬áž ááœá¬ááá»ááº
áá±áá¬ááá¯ááŒáá·áºááá·áº áá±á¬ááºáá áºáááºážááŸá¬ ááá¯ááá¯ááºážááŸáá·áº áááºá áá±á¬á· á¡ááœá±á·á¡ááŒá¯á¶áá»á¬ážááŒá¬áž ááœá¬ááá»áẠáááºáá»áŸááŒá®ážáá¬ážáááºááᯠá á°ážá ááºážáááºááŒá áºáááºá JavaScript áá¯ááºáá»á¬ážá ááá¬ááá»á¬ážááᯠááŸáá¯ááºážááŸááºááŒááºážá¡ááŒá±á¬ááºáž ááŒá±á¬ááá¯áá«áá ááá¯ááá¯á·áá±á¬ ááŸáá¯ááºážááŸááºááŸá¯ááẠááŒá±á¬ááºáááºááœááºáá±á¬ááºážááá·áº á¡áá¬áá áºáᯠááá¯ááºáá±á áá¯ááºáá«áááºá áá±á«ááºážáá¯ááºáá¯ááºááá¯á·ááá²á· áá¯áẠááá¬á á¡áááºážáááºááᯠááœá±á·ááᬠáá±á¬ááºážáá«áááºá áá«áá±ááá·áº ááá¯ááá¯ááºážááºáá²á· áááºá áºáá±á¬á·áá¯áẠááá¬áááŸá¬ ááœá¬ááŒá¬ážááŸá¯ ááááºáááŸááá«áá°ážá
ááá¯á·áá±á¬áº áá¯ááºááá¯áá¯ááºáá±á¬ááºááẠááá¯á¡ááºááá·áºá¡áá»áááºááᯠááá¯ááºážááŒá¬ážá áááºááŒá¬áá«áá ááá¯ááá¯ááºážááŸáá·áº desktop á ááºáá»á¬ážááŒá¬ážááœáẠá¡ááœááºááŒá®ážáá¬ážáá±á¬ ááœá¬ááá»ááºááᯠáááá¬á á±áááºá
desktop áá»á¬ážááŸáá·áº ááŸáá¯ááºážááŸááºáá«á ááá¯ááá¯ááºážá ááºáá á¹á ááºážáá»á¬ážááœáẠscript processing ááŸáá·áº áááºáááºáá±á¬ á¡áá»ááẠ(áá¬ááá¯ááºááŸá¯ááºáž) ááá¯ážáá¬áááºá
áá¬ááá¯ááºááŸá¯ááºážáá»á¬áž
10
25
50
75
90
ááá¯ááºááœá± á¡á¬ážáá¯á¶áž
144.1
172.8
185.5
208.5
224.0
jQuery ááá¯ááºáá»á¬áž
188.2
187.4
191.3
209.6
221.9
Vue áááºááá¯ááºáá»á¬áž
222.5
220.8
220.2
221.4
220.4
áá»á®ážáááºážááá¯ááºáá»á¬áž
205.1
206.0
201.6
210.4
218.7
áááºááá¯ááºáá»á¬ážááᯠáá¯á¶á·ááŒááºáá«á
431.5
386.8
337.9
242.6
179.6
áá¯ááºážááŸáá·áº áááºááºáá±á¬á·áá áºáá¯á¶ážááŒá¬ážáá¯ááºáá¯ááºáá±á¬ááºááŒááºážá¡ááŒááºááŸá¯ááºážááœáẠááœá¬ááŒá¬ážáá»ááºá¡áá»áá¯á·ááᯠáá»áŸá±á¬áºááá·áºáá¬ážáá±á¬áºáááºážá áá±ááºáá®áá±á¬ááºáá»á¬ážááᯠáá«áá«áááºážáá±á¬á ááºáá»á¬ážááœáẠáá¯á¶áá±á¬ááºáá±á¬áá áºááŸááºááá¯ááºááŒá±á¬ááºážááŸáá·áº ááœá²ááŒá¬ážáááºááŸááºáá¬ážáá±á¬ ááœá¬ááá»ááºááᯠááááºááá¯áá±á¬ááá¹áááŸáááŒá±á¬ááºážá 10 áá¬ááá¯ááºááŸá¯ááºážááœááºáááºá React site áá»á¬ážááẠdesktop main thread ááẠmobile main thread ááœáẠ431.5% ááá¯á¡áá»áááºááŒá¯ááºážááŒáááºá jQuery ááẠá¡áá±ážáááºáá¯á¶áž ááœá¬ááá»áẠááŒá áºáá±á¬áºáááºáž á€áá±áá¬ááœááºááẠáááºááá¯ááºáᬠááááºážááááºážááŸá¬ 188.2% ááŒá áºáááºá áááºááá¯áẠdeveloper áá»á¬ážááẠáááºážááá¯á· ááá±á¬áá»ááºáá»á¬ážááᯠáá¯ááºáá±á¬ááºááẠCPU á¡áá»áááºááá¯ááá¯á¡ááºááá·áº áááºážáááºážááŒáá·áº ááŒá¯áá¯ááºáá±á¬á¡áá« (áááºážááẠá¡áá»áááºááŒá¬áá¬áááºááŸáá·áºá¡áá»áŸ ááá¯ááá¯ážáá¬áááº)á áá«áá«áááºážáá±á¬ á ááºááá¯ááºááŸááºáá»á¬ážááẠáááºážá¡ááœáẠáá±ážáá±á¬ááºááááºááŒá áºáááºá
ááááºáá»á¬ážááá¯
áá±á¬ááºážááœááºáá±á¬ áá°áá±á¬ááºáá»á¬ážááẠáááºááá±á¬áá»ááºáá»á¬ážááᯠáááºáá±á¬ááºááŒááºážá¡ááœáẠdeveloper áá»á¬ážá¡á¬áž áá±á¬ááºážááœááºáá±á¬ á¡ááŒá±áá¶á¡á¯ááºááŒá áºáá»á¬áž (áá¯á¶ááŒá¯á¶áá±ážá áá¯á¶ážá áœá²ááá¯ááºááŸá¯á á áœááºážáá±á¬ááºáááºááá¯ááºáá¬) ááá¯á·ááá¯áẠá¡ááá¯áá«ááá·áºáááºáá»ááºáá»á¬ážááᯠáá»áá¯ážáá±á¬ááºááá·áºá¡áá¬áá áºáá¯ááᯠáááºáá®ážáááºáááºáá²á á±ááá·áº built-in ááá·áºáááºáá»ááºáá»á¬áž ááŸáááá·áºáááºá
áááºážááẠáááºááá±á¬áá»ááºáá»á¬ážá á
áœááºážáá±á¬ááºáááºááŸáá·áº áááºááá¯ááºáá¯á¶ááá±á«áºáá« (ááŸáá·áº áááºážááá¯á·á¡ááœáẠáááºááŸá¬ážáááºá
React ááá¯á·ááá¯áẠAngular ááá¯ááºáá»á¬ážááẠá¡ááŒá¬ážá¡áá¬áá»á¬ážááẠCPU áá¯ááºááŒááºáááºáá¬ááœáẠá¡áá»áááºááá¯áá¯á¶ážá áœá²ááŒááºážááŒá±á¬áá·áº React site áá»á¬ážááẠVue ááá¯ááºáá»á¬ážááẠCPU ááá¯ááá¯á¡áá¯á¶ážáá»á¬ážáááºáᯠáááá¯ááá¯ááŒá±á¬ááºáž áááááŒá¯ááá·áºáá«áááºá á¡ááŸááºááŸá¬á áá»áœááºá¯ááºááá¯á·ááŒáá·áºááŸá¯áá²á·ááá·áº áá±áá¬ááẠáá°áá±á¬ááºáá»á¬ážááŸáá·áº á á¬ááŒáá·áºááá¯ááºáá»á¬ážá áááºáááºáá±á¬ááºááœááºááŸá¯ááá¯ááºáᬠá áœááºážáá±á¬ááºáááºááŸáá·áº áááºáááºá á¡áááºážáááºáᬠáá±á¬áºááŒáá¬ážáá«áááºá á€áá°áá±á¬ááºáá»á¬ážááẠáááá¯ááááºáá¬áá»á¬ážáá®ááá¯á· ááœááºážááá¯á·ááá¯ááºáááºááŒá áºá á± á¡ááá áááºááŸáááááŸáá ááœá¶á·ááŒáá¯ážááá¯ážáááºáá±ážááá¯ááºáá¬áá»ááºážáááºááŸá¯áá»á¬ážá¡ááŒá±á¬ááºáž ááá¯ááá¯ááŒá±á¬ááá¯ááŒáááºá áá°áá±á¬ááºáá»á¬ážá áááºážááá¯á·á áá±áá áá áºááŸáá·áº áá¯á¶ááœá¶á·ááŒáá¯ážááá¯ážáááºáá±ážáááºážááá¬áá»á¬ážá¡ááŒá±á¬ááºáž áá»áœááºá¯ááºááá¯á·ááŒá±á¬áá±áá«áááºá
á€áá±áá¬ááœáẠáá»áœááºá¯ááºááá¯á· áááœá²ááŒááºážá áááºááŒá¬áá²á·áá±á¬ á¡áá¬áá áºáá¯ááá¯áááºáž ááŸááºáá¬ážááá¯ááºááẠá á¥ááá¬á áááºááá¯ááºá á á¬áá»ááºááŸá¬áá»á¬ážááŒá¬ážááœáẠáá°ážááŒá±á¬ááºážááá·áºá¡áá« á ááºáá á¹á ááºážááẠJavaScript áá¯ááºááᯠáá¯ááºáá±á¬ááºáá»ááẠáááºáá»áŸááŒá¬áááºááá¯áááºáž ááŸááºáá¬ážááá¯ááºáááºá SPA ááá»ááºááŸá¬áá¬áá±ážá¡ááŒááºážá¡áá¯á¶ááŸá¬ á á¬áá»ááºááŸá¬áá áºáá¯áááºážá¡ááá®áá±ážááŸááºážááá¯ááá±á¬ááºáá¬áá²ááá¯á·áááºááá¯ááºáááºááŸáá·áºáá®á¡áá¯áá®á¡áá¡áá¯á¶ážááŒá¯áá°áááºááá¯ááºáá á¬áá»ááºááŸá¬áá»á¬ážááá¯ááá¯ááá¯ááŒááºáááºá áœá¬áááºáá±á¬ááºááá¯ááºáááá·áºáááºááŒá áºáááºá áá»áœááºáá±á¬á·áºáá²á· á¡ááœá±á·á¡ááŒá¯á¶á¡á áá«á á¡ááŒá áºááŸááºáá²á· áá±ážááœá¬áááºááá¯á· ááŒá±á¬áá¬áá«á ááá¯á·áá±á¬áº á€ááŒá¿áá¬ááᯠááŸááºážáááºážááẠáá»áœááºá¯ááºááá¯á·ááœáẠá¡áá»ááºá¡áááºáááŸááá«á
ááŸááºážáá±áááºááŸá¬ á¡áááºá áááºááẠáááºááá¯ááºáá áºáá¯áááºáá®ážááẠáá±á¬áẠááá¯á·ááá¯áẠá á¬ááŒáá·áºááá¯ááºááᯠá¡áá¯á¶ážááŒá¯áá«áá ááá±á¬áá»ááºááᯠá áááºá á¡áááºááá·áºááŒá áºáá±á á±áááºá¡ááœáẠá¡áá±ážá¡áá°áá áºáᯠááŒá¯áá¯ááºáá±ááŒááºážááŒá áºáááºá áá«á á¡ááŒá¯ááá±á¬áá±á¬ááºáá²á· á¡ááŒá±á¡áá±á¡áá»á¬ážá á¯áá²á·áá±á¬áẠáááºááá¯ááºáá«áááºá
ááá·áºáá»á±á¬áºáá±á¬ á¡ááŒá±á¡áá±áá»á¬ážááœáẠá¡áá»áá¯á·áá±á¬ á¡áá±ážá¡áá°áá»á¬áž ááŒá¯áá¯ááºááẠááŒá áºááá¯ááºáá±á¬áºáááºáž developer áá»á¬ážááẠááá¯áá²á·ááá¯á·áá±á¬ á¡áá±ážá¡áá°áá»á¬ážááᯠáááááŸáááŸá ááŒá¯áá¯ááºááẠá¡áá±ážááŒá®ážáá«áááºá
áá«áá±ááá·áº áá»áœááºáá±á¬áºááá¯á·ááŸá¬ á¡áá±á¬ááºážááŒááºááá¯á· á¡ááŒá±á¬ááºážááŒáá»ááºááŸááá«áááºá Chrome developer áá»á¬ážááẠááá¯áááááá¬áá»á¬ážá á áœááºážáá±á¬ááºáááºááᯠááŒáŸáá·áºáááºáá¬ááœáẠá¡áá±á¬ááºá¡áá°ááŒá áºá á±áááºá¡ááœáẠááŸá±á·áá¯á¶ážáááááá¬á¡áá»áá¯á·á áá±á¬ááºááœááºá០áá°áá»á¬ážááŸáá·áº áááºáá»áŸáá®ážáá®ážáááºááẠáááºááœá²áá¯ááºáá±á¬ááºáá±ááŒáááºááᯠáá»áœááºá¯ááºá¡á¬áž á¡á¬ážáá±ážáá«áááºá
ááá¯á·áá±á¬áº áá»áœááºá¯ááºááẠáááºááœá±á·áá»áá±á¬ áá°áá
áºáŠážááŒá
áºáááºá áááá¯áá¬á¡áá
áºáá»á¬ážááẠá
áœááºážáá±á¬ááºáááºááŒá¿áá¬áá»á¬ážááᯠáááºážááá¯á·ááŒá±ááŸááºážááá¯ááºáááºááŸáá·áºá¡áá»áŸ áááºáá®ážáááºá ááŒá®ážáá±á¬á· áá»áá¯á·ááœááºážáá»ááºááœá±ááᯠáááºááŸá¬ážááá¯á· á¡áá»áááºáá°ááááºá ááá»áŸá±á¬áºááá·áºááá·áºáááá¯áá²á
áááºááẠá€á¡ááŒá±á¬ááºážá¡áá¬ááœáẠááœá±ážááœá±ážáá¬ážáá±á¬ ááŸá±á·áá¯á¶ážáááááá¬áá»á¬ážáá²á០áá áºáá¯ááᯠá¡áá¯á¶ážááŒá¯ááá¯áá«áá ááá¯ááá¯áááºááŸá¬á áááºááẠááá·áºááá±á¬áá»ááºá á áœááºážáá±á¬ááºáááºááᯠáááááá¯ááºá á±ááŒá±á¬ááºáž áá±áá»á¬á á±ááẠáááºáá±á¬ááºážá¡á¬ážáá¯ááºááŸá¯áá»á¬áž ááŒá¯áá¯ááºááááºáᯠááá¯ááá¯áááºá á€áá±á¬ááºá¡áá áºááᯠáááºáá áááºáá® ááá·áºááœááºážá ááºážá á¬ážáááá·áºá¡áá»ááºá¡áá»áá¯á·ááŸá¬ á¡á±á¬ááºáá«ááá¯á·ááŒá áºáááºá
- ááá¯áá·áºááá¯ááá¯áẠá¡ááááá¬ážáá²á· á á áºáá±ážáá«á áááºááœá±ážáá»ááºáá¬ážáá±á¬ áá°áá±á¬ááºááᯠá¡ááŸááºááááºá¡áá¯á¶ážááŒá¯ááẠááá¯á¡ááºáá«ááá¬ážá ááá±á·áá±ááºááœáẠPure JavaScript ááẠáá»á¬ážá áœá¬áá¯ááºáá±á¬ááºááá¯ááºáááºá
- ááá·áºááœá±ážáá»ááºááŸá¯áá±á¬áẠ(Preactá Svelte ááá¯á·ááá¯áẠá¡ááŒá¬ážá¡áá¬áá»á¬ážáá²á·ááá¯á·) ááá¯áá±á¬ááºá 90% á áœááºážáááºáá»á¬ážááᯠáá±ážá áœááºážááá¯ááºááá·áº áá±á«á·áá«ážáá±á¬ááœá±ážáá»ááºááŸá¯áá áºáᯠááŸááá«ááá¬ážá
- á¡áááºá áááºááẠframework áá áºáá¯ááᯠá¡áá¯á¶ážááŒá¯áá±ááŒá®ááá¯áá»áŸááºá ááá¯áá±á¬ááºážá ááá¯ááŸá±ážááá¯ážáááºáá±á¬á á á¶ááœá±ážáá»ááºá áá¬áá»á¬áž (á¥ááá¬á Vue á¡á á¬áž Nuxt.jsá Next.js á áááºááŒáá·áº) áá±ážá áœááºážááá¯ááºáá±á¬ á¡áá¬áá»á¬áž ááŸááááŸá á ááºážá á¬ážáá«á
- áááºážáá¬áá¯ááºááŸá¬áá²á
áááºáá»áẠJavaScript á áœááºážáá±á¬ááºááẠ- áááºážáááºááá¯áá¯ááºááá²á
ááá·áºááẠáááŸááááŒá áºááá¯á¡ááºáááºááẠááá±á¬áá»ááºáá áºáá¯ááá¯á· JavaScript áá¯ááºááᯠááá¯ááá¯ááááºáááºááẠááá¯ááá¯áááºáá²á á±ááá·áº ááœá¶á·ááŒáá¯ážááá¯ážáááºááŸá¯áá¯ááºáááºážá ááºá - ááœá¶á·ááŒáá¯ážááá¯ážáááºááŸá¯ááœááºáá°á
á±áááºá¡ááœáẠáá°áá±á¬ááºáá
áºáá¯ááᯠáááºá¡áá¯á¶ážááŒá¯áá±áá«áá á
ááºážá
á¬ážáá«á
áááºážááá¯á¡ááºáá¬áž áá±á¬ááºáááºáá»á¬ážáᶠframework code ááá¯á·áá«á áá¬áá¬áá±á«áºááŸá ááŒá¿áá¬á¡á¬ážáá¯á¶ážááᯠáááºááŒá±ááŸááºážááá¯ááºáá«ááá¬ážá
á¡áá»á¬ážá¡á¬ážááŒáá·áºá á€á¡ááŒá¶áá¬ááºáá»á¬ážááẠááŸá±á·áá¯á¶ážááŸááá¯ážáááºááẠáááºáááºááá¯á·áááºááœá±ážáá»ááºáá²á·áááºááŒá áºá á± á¡áá®ážáááºááŒáá·áºááŸá¯ááẠááá¯ááºáááºáá«áááºá ááá¯á·áá±á¬áº áááºá áááºááẠá áœááºážáá±á¬ááºááẠá¡á¬ážáááºážáá±á¬ ááá±á¬áá»ááºáá áºáá¯ááœáẠáá¯ááºáá±á¬ááºáá±áá»áááºááœáẠáááºážááá¯á·ááẠá¡áá°ážá¡áá±ážááŒá®ážáá«áááºá
áá»á áºáááºááá«áá±á¬á á¬áááºáá°áá»á¬áž! á á¶áጠJavaScript áá°áá±á¬ááºá¡ááŒá Ạáááºáááºááá¯á·ááŒááºááááºážá
source: www.habr.com