Performance Optimization — Can We Configure Zone.js to Ignore Specific Events or Blacklist Them?

Have you ever found yourself in a situation where your application is constantly triggering change detection, even when it shouldn’t? Perhaps you have a third-party library that’s firing events that you don’t care about, or maybe you’re receiving an overwhelming amount of data from a server that’s causing your UI to lag. In situations like these, you may want to configure Zone.js to ignore certain events, in order to optimize your application’s performance.

As developers, we are always looking for ways to optimize our code and make our applications faster and more efficient. One way to achieve this in Angular is by using Zone.js to optimize change detection.

However, sometimes we may encounter situations where we want to ignore certain events or actions within our application.

In this blog, we will explore how to configure Zone.js to ignore specific events.

First, let’s understand how Zone.js works. Zone.js is an execution context for JavaScript applications that allows us to intercept and track asynchronous operations, such as timer events, XHR requests, and more. By intercepting these events, Zone.js can optimize change detection by only running it when necessary, reducing the number of times our application checks for updates.

To configure Zone.js to ignore specific events, we can use the blackList and ignoreCertainEvents options. The blackList option allows us to specify a list of event names that we want to ignore.

The ignoreCertainEvents option allows us to specify a function that will be called for each event, and we can use this function to determine whether to ignore the event or not.

Here’s an example of how we can configure Zone.js to ignore specific events:

import { Component, NgZone, EventEmitter } from '@angular/core';
import 'zone.js';

@Component({
  selector: 'app-root',
  template: `
    <button (click)="emitEvent()">Emit Event</button>
  `,
})
export class AppComponent {
  constructor(private zone: NgZone) {
    Zone.current.fork({
      name: 'My Zone',
      blackList: ['mousemove', 'scroll'],
      ignoreCertainEvents: (event: Event) => {
        return event instanceof EventEmitter;
      }
    }).run(() => {
      console.log('Running code in My Zone...');
    });
  }

  emitEvent() {
    const event = new EventEmitter();
    event.emit();
  }
}

In this example, we create a new zone called “My Zone” and configure it to ignore the 'mousemove' and 'scroll' events using the blackList option. We also configure it to ignore any events that are instances of the EventEmitter class using the ignoreCertainEvents option.

In the constructor of our component, we use Zone.current.fork() to create a new zone and configure it using the blackList and ignoreCertainEvents options. We then use the run() method to run some code within our new zone.

In the emitEvent() method, we create a new instance of the EventEmitter class and emit an event. Since we have configured our zone to ignore events that are instances of the EventEmitter class, this event will be ignored and will not trigger change detection or error handling.

By using the blackList and ignoreCertainEvents options, we can configure Zone.js to ignore specific events within our Angular applications. This can help us optimize change detection and improve the performance of our applications.

Other easy workaround would be for whole application

1) Create a new file, zone-flag.ts at the same level with polyfills.ts
2) Add (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['mousemove']; in zone-flag.ts:

// in zone-flag.ts
(window as any). __zone_symbol__ BLACK_LISTED_EVENTS = ['mousemove'];

3) Add import './zone-flag' in polyfills.ts:

// in polyfills.ts
import './zone-flag';
import 'zone.js/dist/zone'; // Included with Angular CLI.

Thanks for reading

• 👏 Please clap for the story and follow me 👉
• 📰 View more content
• 🔔 Follow me: LinkedIn| Twitter| Github