Siddharth Sharma

@hearsid

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

Contacts manager application preview

This post is supposed to compare the performance difference between angular 1.x and angular 2 in terms of the page load time, heap size, number of DOM nodes created, bundled file size and more by comparing the reports of the timeline, profiles and network tabs of chrome dev tools for a simple application (contacts manager) created in both angular 1 (v1.4.10) and angular 2 (v2.1.0 , with server side rendering).

What problem did angular 1 solve?

Angular 1 did a great job of allowing web developers to quickly create a CRUD application by providing features like two way binding. The development time reduced and there was no need to manipulate the DOM using query selectors by libraries like jQuery anymore.

Why was angular2 re-designed when compared to angular1?

Angular2 is very different from angular1 right in terms of the language in which it was written (Typescript) to one of the most important feature of angular, i.e. the change detection mechanism from digest loop in angular1 to a custom implementation by using zoneJs in angular2.

Angular1 reduced the development time/effort and was able to provide modules to integrate new features easily but since now, there was more processing on the client side, page load was taking more time, at least the initial page load. For a normal angular1+jQuery (for extending jqLite of angular1) application, the scripting phase in the function call tree was taking considerable time.
Angular2 tried to solve the problems and provide a better change detection mechanism and a better structure to create/maintain big applications easily.

What is server side rendering?

Here is an excerpt from Client-Side vs. Server-Side Rendering — Karl Seguin to explain the same.

With server-side rendering, your initial request loads the page, layout, CSS, JavaScript and content. For subsequent updates to the page, the client-side rendering approach repeats the steps it used to get the initial content. Namely, JavaScript is used to get some JSON data and templating is used to create the HTML.

Here, in our application server side rendering for angular2 will include compiling the templates and AJAX calls getting done on the server side.

Let’s create the web application and see the performance differences

We are going to create a contacts manager application in both angular1 and angular2. The application will have some contacts by default and will give user the option to add, edit and delete contacts. Here is a screenshot to show you how the application will look.

1.1 Preview of the 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

More by Siddharth Sharma

Topics of interest

More Related Stories