Skip to Content

The Cost of Javascript Frameworks

Javascript inherently is a massive percentage of a performance budget, modern frameworks are less performant than vanilla js sites.

Kadlec’s the­sis is that Javascript in­her­ently is a mas­sive per­cent­age of a per­for­mance bud­get. From this per­spec­tive, he iden­ti­fies the pur­pose of frame­works as:

a frame­work makes it eas­ier to per­form well by ei­ther pro­vid­ing a bet­ter start­ing point or pro­vid­ing con­straints and char­ac­ter­is­tics that make it hard to build some­thing that does­n’t per­form well.

From Kadlex:

JavaScript Bytes Served to Mobile Devices, by Percentile

10th 25th 50th 75th 90th
All Sites 93.4kb 196.6kb 413.5kb 746.8kb 1,201.6kb
w/ jQuery 110.3kb 219.8kb 430.4kb 748.6kb 1,162.3kb
w/ Vue.js 244.7kb 409.3kb 692.1kb 1,065.5kb 1,570.7kb
w/ Angular 445.1kb 675.6kb 1,066.4kb 1,761.5kb 2,893.2kb
w/ React 345.8kb 441.6kb 690.3kb 1,238.5kb 1,893.6kb

Scripting re­lated CPU time (in mil­lisec­onds) for mo­bile de­vices, in per­centiles

10th 25th 50th 75th 90th
All Sites 356.4ms 959.7ms 2,372.1ms 5,367.3ms 10,485.8ms
w/ jQuery 575.3ms 1,147.4ms 2,555.9ms 5,511.0ms 10,349.4ms
w/ Vue.js 1,130.0ms 2,087.9ms 4,100.4ms 7,676.1ms 12,849.4ms
w/ Angular 1,471.3ms 2,380.1ms 4,118.6ms 7,450.8ms 13,296.4ms
w/ React 2,700.1ms 5,090.3ms 9,287.6ms 14,509.6ms 20,813.3ms

The take­away is that mod­ern frame­works, when de­ploy­ing in a best-in-class man­ner, can be as light­weight as an av­er­age fram­work­less web­site, but on av­er­age — and ab­solutely in­clud­ing worst case im­ple­men­ta­tions — mod­ern frame­works are in­cred­i­bly bloated. In par­tic­u­lar, Angular serves heavy pages, React serves slow pages.

From ob­serv­ing the data be­tween sites that de­tect React at all and sites that only de­tect React (as in, for sure no jQuery) Kadlec ob­serves that main thread per­for­mance drops sig­nif­i­cantly. This is a clear in­di­ca­tion that mi­grat­ing from jQuery to React harms main thread per­for­mance.

If you have React and jQuery run­ning along­side each other, you’re more likely to be in the midst of a mi­gra­tion to React, or a mixed code­base. Since we have al­ready seen that sites with jQuery spend less time on the main thread than sites with React, it makes sense that hav­ing some func­tion­al­ity still dri­ven by jQuery would bring the num­bers down a bit.

Additionally, Kadlec ob­serves that mo­bile de­vices suf­fer from this per­for­mance de­crease more than desk­top de­vices. This sug­gests that mod­ern frame­works ex­plic­itly are avoid­ing a mo­bile-first men­tal­ity, and re­ly­ing on con­tem­po­rary hard­ware.

To wrap up, Kadlec sug­gests that this data is­n’t in­dica­tive of the base­line per­for­mance ca­pa­bil­i­ties of a frame­work, but rather in­di­cates that the im­ple­men­ta­tion is at fault. If in gen­eral the im­ple­men­ta­tion of a frame­work is caus­ing per­for­mance is­sues, that the pri­mary fault is in the ecosys­tem, doc­u­men­ta­tion, and com­mu­nity stan­dards around that frame­work.