Automate Marketing Initiatives with Salesforce Marketing Cloud Learn More

7 Tips To Boost Your Angular Application Performance

Sourabh

Agrawal

Published On:

Angular is a robust Javascript framework, and by default, it provides superfast performance. However, when designing complex and realistic applications, you may find that your application starts to become slow as the application size grows.

 

Meanwhile, if your application is not performing well, it will directly impact the end-user experience, which every programmer should avoid.

 

Further it is essential to understand the underlying cause of poor performance in Angular applications with this thing in mind. First, you need to analyze your application and find the cause of the poor performance. Examine the code and determine if it followed the best practices. If not, you need to ensure that the application enforces the best rules and adheres to style guides and clean code architecture.

 

Here are some performance optimization techniques for improving the runtime of your Angular applications.

1. Lazy Loading of Modules

Lazy-loading is one of the most essential and most effective optimization tricks in the browser.


This is very effective; as a result it reduces the amount of bundled files loaded at the initial load of the webpage and only loads the resources that will be used directly in the webpage. All other resources doesn’t load.


They reload only when the user need them.


Angular provides a straightforward way to lazy-load resources.


To configure lazy loading in the Angular routers, we do this:

 

const routes: Routes = [
  {
    path: '',
    component: HomeComponent
  },
  {
    path: 'about',
    loadChildren: () => import("./about/about.module").then(m => m.AboutModule)
  },
  {
    path: 'service',
    loadChildren: () => import("./service/service.module").then(m => m.ServiceModule)
  }
]
​
@NgModule({
  exports: [RouterModule],
  imports: [RouterModule.forChild(routes)]
})
​
class AppRoutingModule {
} 

2. Preloading

Preloading is an optimization strategy that loads resources for future navigations or consumption. This speeds up both the loading and rendering of the resource because the help will already be present in the browser cache.

 

Angular has a preloading strategy implemented in its router module. This allows us to preload resources, routes, modules, etc., in our Angular application. The Angular router provides an abstract class PreloadingStrategy that all class implements to add their preloading strategy in Angular.

 

Below is the code to configure the preloading strategy property in the router configuration.

// ...   
​
RouterModule.forRoot([
  ...
], {
  preloadingStrategy: OurPreloadingStrategy
})
​
// ...   

 

3. “OnPush” Change Detection Strategy

Change detection is strongly related to Angular application performance. It is a convenient feature that helps a lot, but it can work against you if we do not misuse it.
The default behavior of change detection is that each change in your application leads to changing a single CD cycle and from top to bottom for all components.

The OnPush change detection strategy disables the change detection to run on a component and its children. Angular runs CD on the OnPush part when the app bootstraps and disables it. The Onpush element skips along with its children’s details in the subtree on subsequent CD runs.

If the inputs have referentially changed, change detection will only be run on the OnPush component.

@Component({
  selector: 'newsletter',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `...`
})
​
export class NewsletterComponent {
  ....
}

We can ask Angular to run CD by using detectChange method

 

@Component({
    ...
    template: `<div>{{data}}</div>`
})
​
class NewsletterComponent {
  data = 0;
  
  constructor(private changeDetectorRef: ChangeDetectorRef) {
    changeDetectorRef.detach()
  }
​
  clickHandler() {
    this.data++
    this.changeDetectorRef.detectChanges()
  }
​
} 

 

4. Use pure Pipe

We use pipes to transform strings, currency amounts, dates, and other data for display. Pipes are simple functions to use in template expressions to accept an input value and return a transformed value. We can also pass additional arguments, like returning a difference of date from the start and end date.   

 

Angular also provides some built-in pipes for typical data transformations, including conversion of date into a string, and transformations for internationalization (i18n), which use locale information to format data.  

Pipes can be categorized into two types    

 

  1. Impure Pipe
    1. It produces different output for similar input over time  
  2. Pure Pipe
    1. It has a similar output for the same input  

 

Pure pipes introduce no side-effects, so the behavior is predictable, and we can cache the input to shortcut CPU-intensive operations to avoid recomputing them.   

 

Suppose we have used a function in a @Pipe that takes a reasonable amount of time before producing a result. 

@Pipe({
  name: "util"
})
​
class UtilPipe implements PipeTransform {
​
  func(val) {
    ...
​
    return ...;
  }
​
  transform(value) {
    return this.func(value)
  }
}

 

We will see that the func will hang the main thread that runs the UI and make the user wait to see the result. Now suppose the pipe is called every second; that will make a hell of an end-user experience.  

 

To lower the execution of this pipe, we must first note the pipe’s behavior; if it does not change data outside its scope (outside the pipe) then the pipe is a pure pipe. We cache the function results and return them when next time the function call with the same input.   

 

So for this, it is no matter how many times the pipe is called with an input, the func is called once, and the cached results are returned on subsequent calls.  

 

To add this behavior in @Pipe, we do this:

@Pipe({
  name: "util",
  pure: true
})
​
class UtilPipe implements PipeTransform {
 // ...
}  

 

With this, we tell Angular that this pipe is pure and doesn’t side-effect, so it should cache the outputs and return them when the inputs occur again.

5. Use trackBy option for *ngFor directive 


We are all familiar with the `*ngFor` directive, and it helps to repeat the same template for each collection item. Consider a scenario where you retrieve a list of accounts and display all account data on the page. Suppose a user adds a new account from the modal window; we reload the list of accounts again from the server and reassign the value to the list variable. This causes a re-rendering of `ngFor` directive.   


As mainly one user add the accounts, we only accept lists that get appended with a newly created account when a new list is re-fetched; this will make `ngFor` unnecessarily re-rendering the DOM. The reason is that ngFor removes all the DOM elements associated with the data and will re-create it even if the data is the same. Rendering an extensive collection on the page could be an expensive process.  


To solve this problem Angular provide us the trackBy feature to track elements when they are added or removed from the array list, `trackBy` accepts a function that returns the identity to compare with so, while rendering the template for each iteration, it stores value to default value against each template, so next time before rendering the template, it checks for the trackBy function value, if it is changed then only it re-renders the template. 

@Component({
    ...
    template: `
        <div *ngFor="let user of accounts; trackBy:trackByUserId">    
         ...  
        </div>    
​
    `
})
​
class AccountComponent {
  accounts = [];
​
  constructor() {
  }
  
  trackByUserId(index: number, accounts: any): string {
    return accounts.userId;
  }
​
} 

 

6. Optimize template expressions

Define your data/function in the component and render it on the DOM using double curly braces. For me, template expressions were one of the most useful features. Although we found it very useful, we still need to know the best practices for using Angular template expressions. 

We often run functions in templates: 

@Component({
  ...
  template: `<div>{{getDate()}}</div>`
​
})
​
class TestComponent {
  
  getDate() {
    ...
    
  }
​
}

 

When CD runs on the TestComponent this getDate will also run. Also, this getDate will have to complete before the CD, and other codes will move on.   

 

If the getDate function takes a long time to complete, users will experience drag or slowdowns. If a template expression becomes highly computational, don’t use it in the template or utilize caching on it.

7. NgZone or Outside the Angular

NgZone catches asynchronous operations from the Angular application. Meanwhile all code we write in Angular runs on the global zone; on the call stack Zone.js creates this zone to listen to async events (click, mouse move, etc.).   

Further after losing the power of change detection, even if Angular has the feature to disable the zone JS, the UI will not update. But we also have another option: the run outside-Angular zone.

 

Firstly, let’s take a look at the use case. It might occur in any place where you fire timers frequently, like setInterval, setTimeout. Let’s say we have to animate a car moving on track inside our angular app. Our animation code to move a car is in setInterval. 

@Component({
  ...
    template: `<div>   </div>`
})

class TestComponent {

  interval: any; 
  constructor(private ngZone: NgZone) {}
  
  processOutsideZone() {
    this.ngZone.runOutsideAngular(()=> {
      this.interval = window.setInterval(() => { 
        this.setPosition();
        this.repaint();
        }, 200)
    })
  }

}

 

Every 200ms, our car moves from its current position, and CD is also triggered each time. By default, CD is triggered whenever last function in call stack is executed — if it’s in the NgZone. 

 

So, every 200ms, on the call stack we put a callback from set Interval , and after execution of this function, the CD triggers on the root component. 

 

Further there is a simple way to fix it. You can wrap it with NgZone.runOutsideAngular. processOutsideZone runs the code outside the NgZone, and angular isn’t even “aware” that we fire these timers. 

A place for big ideas.

Reimagine organizational performance while delivering a delightful experience through optimized operations.

Conclusion

There go the top 7 best practices to boost your Angular application performance.   

To sum up, developing an Angular application is a straightforward task. Further, the challenging task is to optimize its performance for an excellent end-user experience. However, there are many ways of improving the performance of an application; incorporating some of the essential optimization techniques inside your application can help in optimizing and fine-tuning your Angular apps.  

Let’s
Work
Together

Top Stories

Microsoft Azure Cloud
5 Reasons to Use Microsoft Azure Cloud for Your Enterprise
Cloud computing is the stream of modern computer science technology in which we learn how to deliver different services through the Internet. These services include tools like servers, data storage, databases, networking, and software. Cloud computing is an optimized solution for people and enterprises looking for several benefits, such as
Cloud Computing Platform
What Makes Microsoft Azure a Better Cloud Computing Platform
Microsoft has leveraged its continuously expanding worldwide network of data centers to create Azure cloud, a platform for creating, deploying, and managing services and applications anywhere. Azure provides an ever-expanding array of tools and services designed to fulfill all your needs through one convenient, easy-to-manage Platform. Azure sums up the
Azure Cloud
Things You Should Know About Microsoft Azure Cloud Computing
Microsoft Azure is a cloud computing service provided by Microsoft. Azure has over 600 benefits, but overall, Azure is a web-based platform for building, testing, managing, and deploying applications and services. Azure offers three main functional areas. Virtual machines, cloud services, and application services. Microsoft Azure is a platform for
Microsoft Azure Cloud Computing
What Are the Options for Automation Using Microsoft Azure?
Automation is at the forefront of all enterprise IT solutions. If processes overlap, use technical resources to automate them. If your function takes a long time, find a way to automate it. If the task is of little value and no one needs to work on it, automate it. This
Apache Airflow
How to Create and Run DAGs in Apache Airflow
Apache Airflow is an open source distributed workflow management platform built for data orchestration. Maxime Beauchemin first started his Airflow project on his Airbnb. After the project's success, the Apache Software Foundation quickly adopted his Airflow project. Initially, he was hired as an incubator project in 2016 and later as
Apache Airflow Automation
How Easy is it to Get Started with Apache Airflow?
Apache Airflow is a workflow engine that efficiently plans and executes complex data pipelines. It ensures that each task in your data pipeline runs in the correct order and that each job gets the resources it needs. It provides a friendly UI to monitor and fix any issues. Airflow is

          Success!!

          Keep an eye on your inbox for the PDF, it's on its way!

          If you don't see it in your inbox, don't forget to give your junk folder a quick peek. Just in case. 





              You have successfully subscribed to the newsletter

              There was an error while trying to send your request. Please try again.

              Zehntech will use the information you provide on this form to be in touch with you and to provide updates and marketing.