Angular VS React: Performance comparison with Google Web Vitals
Tags: angular, react, javascript, webdev
Published: 2022-11-05 14:47:33

**Target Audience:**  
Software Developers/ Technical Managers who want to compare performance metrics of Angular and React to get better perspective about which one of these is more suitable for an upcoming project.

## **Introduction**

Angular is a JavaScript framework built by Google, while React 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 going to compare the performance difference between React and Angular in terms of:  
1) App bundle size (JS files only) 
2) Heap size
3) DOM nodes
4) DOM Content Loaded (DCL)
5) First Contentful Paint (FCP)
6) Largest Contentful Paint (LCP)
7) Time To Interactive (TTI)
8) Scripting time
9) Rendering time

We will be comparing the data from **Performance, Memory, Lighthouse, Performance insights (its still a preview feature) and Network tab** of Chrome Devtools for a simple application (Contact manager) created in both **React (v18.2.0)** and **Angular (v14.2.6)**.

## Contact Manager Application


![Preview Contact Manager application](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gceon7qs6zzong6r3tv6.png)

We are going to create Contact 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 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 to be generated. In this article, we will be looking at performance results for 1,000 contacts.

If you would like to check the application’s performance for a different set of contact number, the **applications can be accessed by the URL provided or cloned from Github repo link provided** at bottom of article.  
NOTE: I have tried to list most accurate readings but there are factors like latency and caching etc which could have affected them.

## **Table of readings (For 1,000 Contacts)**
[https://gist.github.com/hearsid/6d125d91283cd30c3ff958ef6e1e4e54#file-table-of-readings-1k-md](url)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gb2q7nvf6gp7zfjpu3mm.png)

## Setup Details

Hosting: Github pages  
Angular stack: Angular v14.2.6 with default packages.  
React stack: React (v18.2), react-router-dom, Typescript.

Lets dive in and see how the above reading were taken and how they contribute in enhancing the performance of our application.

## 1) Application Bundle 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 tab of chrome dev tools and the application size shown in the above table has been calculated by adding the JS file size. The file size can also be checked from the lighthouse report.


![React Contact manager network tab](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1xu7tljm63yjhl0dgwm2.png)
1.1 Angular Contact manager network tab

![Angular Contact manager network tab](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f4leh8rfw3n34vhl56zr.png)
1.2 React Contact manager network tab

## 2) Heap size

Memory tab is going to show the memory distribution by the page’s JavaScript objects and related DOM nodes. Readings for both Angular and React look fine as for our application.

## 3) DOM nodes

This is crucial since a template parser’s internal compilation of the templates may result in the insertion of a few extra DOM nodes. Lesser the node elements, lighter the DOM tree, the better it is. But in our case the number of DOM nodes are same for Angular and React.

## 4) DCL- DOM Content Loaded

When the HTML document has been fully parsed and all deferred scripts have downloaded and run, the DOMContentLoaded event is fired. It doesn’t wait for other elements like as async scripts, subframes and pictures to finish loading. In the below screenshot and for comparison **best of 3 readings** been taken. We can take readings for these Web vitals from Performance and Lighthouse tab as well. The application looks like this or with less styling after DOM Content Loaded event.


![Application after DCL](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/am1j5yk0z8ddvj5lladc.png)


![Angular app DCL, FCP, TTI, LCP](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xhybzvrs401f5a2hmglb.png)

4.2 Angular app DCL, FCP, TTI, LCP

![React app DCL, FCP, TTI, LCP](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u59votwnoz9pu2uf7ttn.png)
4.3 React app DCL, FCP, TTI, LCP

## 5) FCP- First Contentful Paint

First Contentful Paint (FCP) is when the browser renders the first bit of content from the DOM, providing the first feedback to the user that the page is actually loading. The appliation should looks like this after FCP.


![First contentful paint](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ymfp5pszfm5jn4ol0wyz.png)

5.1 Application after FCP

## 6) LCP- Largest Contentful Paint

LCP measures the time from when the user initiates loading the page until the largest image or text block is rendered within the viewport.

## 7) TTI- Time To Interactive

The TTI metric measures the time from when the page starts loading to when its main sub-resources have loaded and it is capable of reliably responding to user input quickly. **Our application should be completely loaded after this.**

## 8) Scripting time

How much of the total time was spent in scripting phase by the framework. There is significant difference in this for Angular and React,


![Angular app Performance app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hwi2s6nslqu68r0x7sqm.png)
8.1 Angular app Performance app

![React app Performance tab](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3lj17z2z49rwyno2jgjr.png)
8.2 React app Performance tab

## 9) Rendering Time

How much of the total time was spent in the rendering phase by the frameworks.

## 10) Onload event

The load event is fired when the whole page has loaded, including all dependent resources such as stylesheets and images. This is in contrast to DOM Content Loaded event, which is fired as soon as the page DOM has been loaded, without waiting for resources to finish loading.

## Repository links:

-   [Angular Contact manager Github repository](https://github.com/hearsid/ng-contact-manager)
-   [React Contact manager Github repository](https://github.com/hearsid/react-contact-manager)

## Application links:

-   [Angular Contact manager application link](https://hearsid.com/ng-contact-manager/#/contacts?no_of_contacts=100)
-   [React Contact manager application link](https://hearsid.com/react-contact-manager/?no_of_contacts=100)