Performance of modern JavaScript frameworks

Lots of developers when start building yet another JavaScript application do not think about important thing which is the web application performance. Let’s cover this significant aspect of software development.

|

Introduction

JavaScript community is growing each day. A lot of JavaScript developers use frameworks in daily basis to speed up development process. Lots of them do not think about two important things when they build yet another JavaScript application – about security and speed. Let’s cover the second one. By adding framework to the application we add a lot of code, which will be downloaded and executed in user browser. We should be also aware of the fact that JavaScript executes asynchronously in browser, but it only utilizes one process. Should I use framework?

This is very important question that every developer should ask himself before creating new application that uses another "extra" JavaScript framework. A lot of things can be done without them, which can save a lot of resources and time-consuming computations. This approach unfortunately requires a little bit more work from developer on project.

What about mobile devices?

Developers should also know that amount of mobile devices such as mobile phones, tablets is still growing and applications should be mobile friendly. It’s not only about UI design but also performance and size of downloaded data – users might have slow 3g connection instead of LTE or Wi-Fi connection. Mobile processors usually are not speed demons. Big amount of computations (or repaints) will also drain device battery.

Time to test

In this article I want to compare few popular frameworks such as:

  • VanillaJS ????
  • AngularJS (1.6.7)
  • Angular (5.0.0)
  • React (16.2.0)
  • Vue.js (2.5.12)

These are most popular and commonly used frameworks by the time article is written. I wanted to find a task which all of them can cover. I have chosen the view layer. We can measure how fast random data is displayed in table and overall framework impact on page loading speed. For this measure we are going to use special class which will generate array of 5000 rows, with 3 properties. Generated data should be processed by each framework and printed out in user browser. For styling we will use Twitter Bootstrap as css framework. All tests can be downloaded and run after downloading repository: https://github.com/GrzegorzWziatek/speedTest

Vanilla.js

This test covers case when developer is not using any framework. To start test open downloaded repository and type:

cd vanillajs
npm install
npm start

Open you browser and navigate to http://localhost:8080, test will start after one second.

Total downloaded size is 125 KB. Full load without cache is around 800 ms. Table below will show us collected data.

Iteration Load time [ms] Generate time [ms] Regenerate time [ms]
Average 11 960 324
0 18 930 347
1 8 971 319
2 12 965 340
3 8 946 312
4 8 952 314
5 8 949 308
6 12 964 321
7 12 975 332
8 8 956 328
9 13 984 323
10 13 969 320

AngularJS (1.6.7)

This test covers case when developer is using AngularJS framework. To start test open downloaded repository and type:

cd angularjs
npm install
npm start

Open you browser and navigate to http://localhost:8080, test will start after one second.

Total downloaded size is 292 KB. Full load without cache is around 2000 ms. Table below will show us collected data.

Iteration Load time [ms] Generate time [ms] Regenerate time [ms]
Average 12 1355 1537
0 9 1268 1530
1 13 1364 1522
2 13 1342 1564
3 12 1360 1540
4 13 1376 1538
5 12 1360 1529
6 12 1353 1508
7 12 1357 1534
8 13 1381 1541
9 13 1382 1553
10 13 1364 1547

Angular 5.0.0

This test covers case when developer is using Angular 5 framework (AngularJS successor). To start test open downloaded repository and type:

cd angular
npm install
npm run-script build
npm run-script start-prod

Open you browser and navigate to http://localhost:8080, test will start after one second.

Total downloaded size is 331 KB. Full load without cache is around 350 ms. Table below will show us collected data.

Iteration Load time [ms] Generate time [ms] Regenerate time [ms]
Average 41 935 1034
0 36 932 1040
1 62 919 1050
2 61 926 1035
3 59 945 1033
4 32 931 1022
5 34 946 1033
6 33 947 1026
7 33 939 1054
8 34 929 1017
9 33 931 1029
10 32 940 1037

React (16.2.0)

This test covers case when developer is using React framework.To start test open downloaded repository and type:

cd reactjs
npm install
npm run-script build
npm run-script start-prod

Open you browser and navigate to http://localhost:8080, test will start after one second.

Total downloaded size is 141 KB. Full load without cache is around 300 ms. Table below will show us collected data.

Iteration Load time [ms] Generate time [ms] Regenerate time [ms]
Average 16 882 224
0 20 894 223
1 14 882 223
2 30 890 222
3 13 879 226
4 15 884 225
5 14 877 223
6 16 887 222
7 13 876 220
8 15 882 225
9 13 877 225
10 14 878 226

VueJS 2.5.12

This test covers case when developer is using Vue.js framework. To start test open downloaded repository and type:

cd vue
npm install
npm start

Open you browser and navigate to http://localhost:8080, test will start after one second.

Total downloaded size is 211 KB. Full load without cache is around 1100 ms. Table below will show us collected data.

Iteration Load time [ms] Generate time [ms] Regenerate time [ms]
Average 11 960 324
0 18 930 347
1 8 971 319
2 12 965 340
3 8 946 312
4 8 952 314
5 8 949 308
6 12 964 321
7 12 975 332
8 8 956 328
9 13 984 323
10 13 969 320

Summary

Now it is time to summarize our test. Two frameworks (or should I call them libraries?) React and Vue.js have times that are very close to pure JavaScript test. You can find one thing interesting - React regenerate (view update) time was smaller than the one written in pure JavaScript. This result was achieved by implementation of Virtual DOM in React. More about Virtual DOM can be read here: https://www.codecademy.com/articles/react-virtual-dom

We can also notice that Angular 5.0 performance compared to its older brother AngularJS has improved - loading time has significantly decreased, same as other results.

During the test we saw framework impact on application performance. Using frameworks makes coding easier and faster, but it has price. Frameworks are tools, which are used in order to not rewrite each application from scratch.

Grzegorz Wziątek

Did you like this article?

Performance of modern JavaScript frameworks