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

Mind That Age!

This blog post is 4 years old! Most likely, its content is outdated. Especially if it's technical.

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:
Whatsdeployed rewritten in React 15 April 2019
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