Performance comparison of AngularJs 1.x and AngularJs 2 through contacts manager application

1.2 Preview of application (bottom of the page)

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. We will be looking at performance results for 500 contacts.

If you would like to check the applications performance for a different set of contacts number, the applications can be downloaded from the links provided at the bottom of this post.

NOTE : The URL of the application doesn’t point to a registered domain but has been modified by making changes in the local hosts and NGINX configuration file to get a clean URL and production accurate readings (by making use of feature like gzip compression).

URL has been set to

http://ng2contactsmanager.com/contacts?no_of_contacts=1000 (for angular2) and

http://ng1contactsmanager.com/#/?no_of_contacts=1000 (for angular1)

Table of readings (For 500 Contacts) :

                   **_Angular 2_ **           **_Angular 1_** 

a.App size (html+JS) 342.8KB 77.9KB

b.Heap size 27.8MB 18.6MB

c.Total Loading Time 2530ms 3470ms

d.Page visible at 1250ms 3500ms

e.DOM nodes 24K - 72K 25K - 49K

f.Scripting time / 51.9%(1315ms) 76.6%(2661ms)Total time - (%)

g.Rendering time / 26.5%(672ms) 9.5%(331ms)Total time - (%)

Details of setup environment:

OS: macOS Sierra

Browser: Chrome canary

Angular1 stack: gulp (for bundling), node-express (for serving files)

Angular2 stack: angular-universal starter kit (Webpack, node-express etc.)

NGINX: enabled gzip compression

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.

Angular2 application size= 5.8KB(HTML) + 337KB(index.js)

Angular1 application size= ~2KB(HTML) + (52.6+12+9.4+1.9)KB

NOTE: Please don’t get confused by the dark theme of the chrome dev tools, for my preference I have kept the chrome dev tools docked to right and with dark theme.

2.1 Angular2 network tab

2.2 Angular1 network tab

2.3 Angular2: HTML comes compiled from server

2.4 Angular1 partial is received and is compiled on the client side

Another interesting thing that can be noticed in the network tab is that no AJAX call is made for angular2 since the same got done on the server side.

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.

3.1 Angular2 heap snapshot

3.2 Angular1 heap snapshot

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.

4.1 Angular 2 timeline tab explantion

4.2 Angular 1 timeline tab explanation

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.

5.1 Angular2 flame chart

5.2 Angular1 flame chart

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.

Github links :

NG2 contacts manager => https://github.com/hearsid/ng2-contact-manager

NG1 contacts manager => https://github.com/hearsid/angular-contact-manager