Performance comparison of AngularJs 1.x and AngularJs 2 through contacts manager application
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.
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.9KBb.Heap size 27.8MB 18.6MBc.Total Loading Time 2530ms 3470msd.Page visible at 1250ms 3500mse.DOM nodes 24K - 72K 25K - 49Kf.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.
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.
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.
Github links :
NG2 contacts manager => https://github.com/hearsid/ng2-contact-manager
NG1 contacts manager => https://github.com/hearsid/angular-contact-manager
Hacker Noon is how hackers start their afternoons. We’re a part of the @AMI family. We are now accepting submissions and happy to discuss advertising & sponsorship opportunities.
If you enjoyed this story, we recommend reading our latest tech stories and trending tech stories. Until next time, don’t take the realities of the world for granted!
