Visual speed comparison of AngularJS and ReactJS

20 July 2015   0 comments   Web development, AngularJS, Javascript

http://www.webpagetest.org/video/compare.php?tests=150719_5Y_104A,150719_41_104B,150719_1X_104C

Last year I put together a little experiment called AJAX or Not? and blogged about it here. The basic idea was to display 1,000 rows in a table. There are several ways of doing it but I decided to compare the following three patterns:

  1. Rendering the whole table in Django server-side and return the whole HTML document.
  2. Rendering a skeleton page, then load the table content as a big chunk of HTML via AJAX.
  3. Rendering a skeleton page, and let AngularJS load all the content of the table from the server as JSON and let AngularJS render it into the DOM.

It was clear as day that the server-side rendering version was hands down the fastest. And the AngularJS rendering the slowest.

Note! AngularJS is amazing and super flexible and powerful because you don't really need to worry about how to re-render once the data changes. This this really useful when you do things like loading more data from a remote endpoint or doing some in-page filtering.

Enter ReactJS

The point of AJAX or Not was not to compare Javascript frameworks but I had some time and I thought I'd write an equivalent version of the AngularJS one with ReactJS (version 0.13.3).

Anyway, here's the code and it's using the GitHub fetch polyfill to do the AJAX query. The AngularJS code is here and here and as you can see it's using track by on the ng-repeat.

WebPageTest
To measure the difference I ran a comparison in WebPageTest which I encourage you open and study for a bit. You can watch the video and download the video here.

Also, note that the Django rendered version loads jQuery. That's because the functionality dictates that clicking on a link should show a confirmation box before going to the link. I know, it's silly but it's very realistic that every page needs some Javascript functionality.

Executive summary...

Some other thoughts...

Comments

Your email will never ever be published


Related posts

Previous:
Premailer.io 08 July 2015
Next:
How do log ALL PostgreSQL SQL happening 20 July 2015
Related by Keyword:
How much HTML is too much for optimal web performance 17 October 2018
A darn good search filter function in JavaScript 12 September 2018
To defer or to async JavaScript tags. That's the question. 29 June 2018
To CDN assets or just HTTP/2 17 May 2018
The impressive first-meaningful-paint improvement of using minimalcss 24 April 2018
Related by Text:
jQuery and Highslide JS 08 January 2008
I'm back! Peterbe.com has been renewed 05 June 2005
Anti-McCain propaganda videos 12 August 2008
Ever wondered how much $87 Billion is? 04 November 2003
Guake, not Yakuake or Yeahconsole 23 January 2010