Rendering Speed & Performance challenge with Famous Front-End Framework

I try to start this blog last week because my colleague or my friends love to claim the speed of any front-end framework. Almost said “React is the best” but I don’t believe that and my idea is PolymerJS and Angular 2 should be great too.
So I try to write script in any framework for testing rendering speed follow condition below

  1. Compare between AngularJS 1, AngularJS 2, jQuery, ReactJS, PolymerJS, RiotJS, VueJS
  2. Process is load 10,000 items in JSON format from local file and render with lists (Card UI)
  3. Use Material Design Lite for UI kit Because it should be great with any Framework and no Framework dependency
  4. All script loading From CDN
  5. Use Mocha & to testing speed
  6. build & test script is here
  7. Hosting with Firebase
Complete resource should be like this

Let Start testing Render

After I try to run testing with Mocha and Nightmare, This is a result of 5 times running (Full Result Here)

Summary

From Testing VueJS version 1 is “Fastest”. The polymer should be fast but “Slowest”. Angular 2 is better than Angular 1 but can’t beat ReactJS or VueJS Although Angular 2 is #3 but still slower than ReactJS 1x

In Deep….

I want to know which process that each framework spends time. So I try to run Timeline Analysis in Google Dev Tools And this is Result

TL;DR
“RiotJS” and “jQuery” Spend more time for Scripting. PolymerJS Take a lot of time For rendering not scripting is look like Rendering process of PolymerJS has some problem. For other Framework Scripting time and Rendering time quite balance.

Memory Consumption

Speed can’t indicate quality. Memory consumption is one of the factor. Because if you Application fast but use a lot of memory that means that computer will be slow when to render your site, so I try to refresh site few time and record JS heap and this is maximum heap of each Framework

jQuery and PolymerJS are looking good for memory consumption but are not sufficient for a tradeoff. In case you concern about memory consumption ReactJS is the best choice.

Scrolling Speed

Not difference. Sorry for video my recorder is error while recording. However is not difference.

Update With VueJS2

I just Try VueJS 2 It Super fast!!!!. It’s faster than Vuejs first version rendering time is reduce around 20–50%. How every now VueJS2 is still RC but this is a good choice for your Front end.

Disclaimer

My testing is the limited environment and the situation. In some cases the result will change. Who has another result please share to. Also, some of my code maybe dirty If anyone could re-factors and looks better, please share . I want to sorry if any result is not same as you expectation or make you feel bad.