Angular vs AngularJS: Performance Comparison
September 24, 2021•2 min read
Are you looking for a performance comparison of AngularJS and Angular? Should you make the migration? In this article we will try to answer the question is new Angular version performs better than old AngularJS.
Preparation
Test app
To get a clear picture of which angular performs better we need a test application written on a different version of angular framework. Also we need to cover next requirements to make our experiments close to real life experience.
- Real World App -
- Standardized -
- Trusted by community
Fortunately for us such a project is already done and being tested for several years by Eric Simons. His RealWorld shows you how the exact same real world blogging platform is built using all popular frontend and backend frameworks. As they use the same API spec it could be used as a perfect solution for testing performance of real applications. The example application is a social blogging site (i.e. a Medium.com clone) called "Conduit". It uses a custom API for all requests, including authentication. For comparison were taken 3 versions from the Real World repository: Angular 9, Angular 7 and AngularJS. Our goal is to find out if the Angular team achieved better performance with the newer versions of Angular.
Collect metrics
After considering an application to test we need to define what metrics we look at and how to collect them. To measure the performance we will use sitespeed.io. It is an open source pack of tools that helps to automize and standardize the process of collecting benchmark data from websites.
Performance overview
First visual change
The time when content of a page is visible to the user for the first time. Lower is better. The faster the page is rendering the more chances to attract end users to stay on the page.
First visual change Angular 9
First visual change Angular 7
First visual change AngularJS
Speed index
The Speed Index is the average time at which visible parts of the page are displayed. It is expressed in milliseconds and dependent on the size of the view port. It was created by Pat Meenan and you can check the full documentation here.
Speed index Angular 9
Speed index Angular 7
Speed index AngularJS
Total page transfer size
The total transfer size of all assets on a page.
Total page transfer size Angular 9
Total page transfer size Angular 7
Total page transfer size AngularJS
Javascript content size
The javascript size unpacked. Winner is Angular 9, the last version of Angular on the current moment, which use new render compilier Ivy that highly decrease the bundle size.
Javascript content size Angular 9
Javascript content size Angular 7
Javascript content size AngularJS
Visual readiness
Visual readiness is the time between the first visual change and the last visual change within the viewport. It is calculated by analyzing a video recording of the screen.
Visual readiness
Angular 9Visual readiness
Angular 7Visual readiness
AngularJS
Visual readiness (detailed)
Visual readiness (detailed) Angular 9
Visual readiness (detailed) Angular 7
Visual readiness (detailed) AngularJS
Summary
Total Summary of Performance comparison of Angular 9/Angular 7/AngularJS
Overall testing shows that newer versions of Angular performs better in most cases. The most important result is the Speed Index in which Angular 9 achieves under 1s. This metric is very important for user experience, because users will prefer to use light and fast apps to those that work slow. Also Angular team did a great job on optimizing the final size of the bundle, despite optimizations like zipping which available on both AngularJs and Angular - new Angular gives us various tools during development such as lazy loaded modules. This helps to keep the code base clean and scalable.
If you are looking for top developers for angular migration or just angular development - feel free to contact us.
Alex Vasylenko is the founder of The Frontend Company, DBC and several other successful startups. A dynamic tech entrepreneur, he began his career as a frontend developer at Deloitte and Scandinavia's largest banking company. In 2023, Alex was honored as one of 'Top 10 Emerging Entrepreneurs' by USA Today.
RATE
Rate this article please
This will help us provide more useful information.
74 ratings, average 5 out of 5
