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:
- Rendering the whole table in Django server-side and return the whole HTML document.
- Rendering a skeleton page, then load the table content as a big chunk of HTML via AJAX.
- 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.
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
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.
- Django server-side takes 0.8 seconds, ReactJS version takes 2.0 seconds and the AngularJS version takes 2.9 seconds.
- The ReactJS version is the fastest to display something. It displays the header and the image first. Only by 0.2 seconds before the Django server-side version.
- The AngularJS version causes a lot more CPU utilization. This might really matter when you're on a low-end smartphone.
- The ReactJS causes twice as much CPU utilization than the server-side version. The AngularJS causes twice as much CPU utilization than the ReactJS version.
- AngularJS is slightly larger than ReactJS + fetch but I don't think this has a huge effect on the total load time.
Some other thoughts...
- This experiment is very optimized in how it gets the data to be displayed. In fact, the server-side rendering time is close to 0 seconds because the whole HTML blob is stored in memcache. A more realistic thing is that extracting the data would take a lot longer if the query isn't so easy to cache. That would be a huge disadvantage for the fully server-side rendered version since if the data query takes a long time you'll sit and stare at a white screen longer. Doing the AJAX approach would definitely be a nicer experience.
08 July 2015
- How do log ALL PostgreSQL SQL happening
20 July 2015
- Related by category:
- How to "onchange" in ReactJS
21 October 2015
- To then() or to success() in AngularJS
27 November 2014
- How to create-react-app with Docker
17 November 2017
- Fastest way to find out if a file exists in S3 (with boto3)
16 June 2017
- How to throttle AND debounce an autocomplete input in React
01 March 2018
- Related by keyword:
12 September 2018
- How to deploy a create-react-app
04 November 2016
- To CDN assets or just HTTP/2
17 May 2018
- 10 Reasons I Love create-react-app
04 January 2017
29 June 2018