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 contacts. 500 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. : The URL of the application 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). NOTE doesn’t point to a registered domain URL has been set to (for angular2) and http://ng2contactsmanager.com/contacts?no_of_contacts=1000 (for angular1) http://ng1contactsmanager.com/#/?no_of_contacts=1000 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 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. network 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

Target

Freelancing as a career

Too Long; Didn't Read

Make resilience your competitive advantage

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

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Freelancing as a career

3 Ways to Pass Async Data to Angular + Child Components

How does Angular2 work? Part 1 — Application Refs

A first look into the Angular CDK

All You Need to Know About @Decorators— a Case Study

Freelancing as a career

3 Ways to Pass Async Data to Angular + Child Components

How does Angular2 work? Part 1 — Application Refs

A first look into the Angular CDK

All You Need to Know About @Decorators— a Case Study

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps