React VS Angular: (With Statistics) Performance comparison through contacts manager application
Introduction
Target Audience: Technical Managers or Software Developers who want to compare performance metrics of Angular and React. This can help you decide which one of these is more suitable for you in an upcoming project.
Angular is a JavaScript framework built by Google, while Reactjs is a Javascript library built by Facebook. Angular is mostly used to build complex CRUD applications quickly, while React makes it possible to build apps that need to show a lot of data and need frequent and fast data update with its virtual DOM concept.
This post is supposed to compare the performance difference between React and Angular in terms of the page load time, heap size, number of DOM nodes created, bundled file size and more by comparing the data from Performance, Memory, Lighthouse, Performance insights and Network tabs of Chrome Devtools for a simple application (contacts manager) created in both React (v18.2.0) and Angular (v14.2.6). For page loading performance, we will be using Web vitals like First Contentful Paint, Largest Contentful Paint, DOM content loaded etc. and other metrics like application bundle size, DOM nodes created, Javascript memory allocation to get an idea of internal working of Angular and React.
Let’s create the web application and see the performance differences
We are going to create Contacts manager application in both React and Angular. Angular application was created using Angular CLI and React application using Create React App (CRA). The application will have some contacts by default and will have option to increase number of contacts to allow you to compare these with different number DOM nodes. There is option to provide a query parameter in the URL, no_of_contacts so that we can dynamically provide the number of contacts the application has to generate. In this article, we will be looking at performance results for 1k and 10k contacts.
image one
image two
If you would like to check the applications performance for a different set of contacts number, the applications can be accessed by the URL provided or downloaded from Github repo link provided at end of article.
Table of readings (For 1,000 Contacts) :
| Angular | React | |
|---|---|---|
| App size | 237.2KB | 70.7KB |
| Heap size | 4.3MB | 4.5MB |
| DOM nodes | 1513 | 1513 |
| DCL- DOM Content Loaded | 1.07s | 0.79s |
| FCL- First Contentful Paint | 1.31s | 1.2s |
| TTI- Time To Interactive | 1.58s | 1.2s |
| LCP- Largest Contentful Paint | 1.31s | 1.28s |
| Onload event | 1313 | 616ms |
| Scripting time/ Total time (%) | 284 | 249 |
| Rendering + Painting time / Total time (%) | 233 | 237 |
| Total time | 718 | 692 |
Table of readings (For 10k Contacts) :
| Angular | React | |
|---|---|---|
| App size | 237.2KB | 70.7KB |
| Heap size | 4.3MB | 4.5MB |
| DOM nodes | 1513 | 1513 |
| DCL- DOM Content Loaded | ||
| FCL- First Contentful Paint | ||
| TTI- Time To Interactive | ||
| LCP- Largest Contentful Paint | ||
| Scripting time/ Total time (%) | ||
| Rendering + Painting time / Total time (%) | ||
Setup Details
For this article, I have preferred to take readings in local server to avoid readings getting affected by latency etc. Code is available in the repository links given in case comparison for another server is required.
OS: macOS Sierra Browser: Chrome canary Angular stack: Angular v14.2.6 with default packages. React stack: React (v18.2), react-router-dom, Typescript NGINX: enabled brotli compression
Lets dive in and see how the above reading were taken and how they contribute in enhancing the performance of our application.
Lets dive in and see how the above reading were taken and how they contribute in enhancing the performance of our application.
a) Application size
Application size decides the download time of the files by the browser and plays an important role, specially when the application size is very big or our target audience may be using slow internet connection. The pictures below are of the network tab of chrome dev tools and the application size shown in the above table has been calculated by adding the HTML and JS file size. Since the HTML gets compiled on the server in case of angular2 thus HTML file size plays an important role here. Whereas in case of angular1, the templates are retrieved by a get call and compilation of the templates by filing the retrieved data in the template is done on the client side.
Angular application size: React application size:
b) Heap size
Profiles tab is going to show the memory distribution by the page’s JavaScript objects and related DOM nodes. Readings for both angular1 and angular2 look fine as for our application.
c) Total loading time
Total loading time is summation of loading, scripting, rendering, painting, idle and more, and is displayed at the bottom of the timeline tab. Refer the pie chart in the picture below.
d) Page visible at
Angular2 is clearly the winner here since the HTTP call and the HTML rendering gets done on the server. Page visible at, is the time at which the page got rendered along with the images and its first preview got visible to the user. To determine the same, the screenshots in the timeline tab can be referred.
It is not necessary that when the page got visible all the event binding got completed, if we refer the flame chart then it will be clear that functions like runTask, invokeTask of zoneJS and subscribe, call from rxJS started binding their listeners after the view got rendered for angular2. If we will refer the flame chart of angular1, most of the time and stack is used by the digest cycle.
e) DOM nodes
This is an important factor since internal compilation of the templates by a templating engine generally inserts few extra HTML elements. Lesser the node elements, lighter the DOM tree, the better it is.
f) Scripting time
Scripting time gives an idea about how much time was spent by the browser in reading/processing the scripts.
Scripting and rendering time were given in terms of percentage in the readings table since it allows us to determine and conclude that for angular2 the major part of the work done by the browser is rendering the view.
In case of angular2 since the HTML comes pre-compiled and the AJAX call also gets made on our server so there is not much time spent in scripting and thus as we can see in the timeline tab, as soon as the HTML file is received the rendering starts. Once the rendering gets done, the scripting starts which does the job of binding the rendered elements with their respective listeners.
In case of angular1, first the script is received and processed, after that the AJAX call is made, once the data is received, it is put into the HTML templates and is parsed to create the view, in between this the calls to get the images are made and once completed the images are also rendered in the view.
g) Rendering time
In rendering phase the browser does the job of rendering the created HTML into the view.
So as for the above readings, angular2 is clear winner over angular1 in terms of performance, but it may be because of server side rendering provided by angular2.
There can be further comparisons between react and angular2 (since both have server side rendering available), angular2 with and without server side rendering etc.
Links
Repository links:
Application links: