I recently discovered that the performance of a page was greatly hindered by an angular directive which was used multiple times on its template. The cause of the slower performance was found in the following bit of code:

@HostListener('window:keydown', ['$event'])
private keydown(e: KeyboardEvent) {
     this.doSomething(e);
}

I suspected the problem might have been caused by the registration of multiple event listeners on the window keydown event, because a new one was registered each time that directive was repeated on the page. To test that theory, I created a service with an RxJS Subject to handle that keyboard event:

@Injectable()
export class KeyboardService {
    constructor() {
        window.addEventListener('keydown', event => {
            this.keydownSubject.next(event);
        });
    }
}

private keydownSubject: Subject<KeyboardEvent> = new Subject<KeyboardEvent>();

get keydown(): Observable<KeyboardEvent> {
    return this.keydownSubject.asObservable();
}

I then removed the @HostListener in the directive, and subscribed to this service's subject in ngOnInit:

export class KeydownEventDirective implements OnInit, OnDestroy {
    constructor(private keyboardService: KeyboardService) {}

    private keydown(e: KeyboardEvent) {
        this.doSomething(e);
    }

    private keydownSubscription: Subscription;
    ngOnInit() {
        this.keydownSubscription =
            this.keyboardService.keydown.subscribe(e => {
                this.keydown(e);
            });
    }

    ngOnDestroy() {
        this.keydownSubscription.unsubscribe();
    }

    ...
}

The solution sped up the page, and I have had difficulty discovering why this would be the case. Why would @HostListener or adding multiple event listeners to the window's keydown event be more detrimental to the page's performance than multiple subscriptions to an RxJS Subject? Could it be that angular HostListeners are not passive listeners by default?

I recently discovered that the performance of a page was greatly hindered by an angular directive which was used multiple times on its template. The cause of the slower performance was found in the following bit of code:

@HostListener('window:keydown', ['$event'])
private keydown(e: KeyboardEvent) {
     this.doSomething(e);
}

I suspected the problem might have been caused by the registration of multiple event listeners on the window keydown event, because a new one was registered each time that directive was repeated on the page. To test that theory, I created a service with an RxJS Subject to handle that keyboard event:

@Injectable()
export class KeyboardService {
    constructor() {
        window.addEventListener('keydown', event => {
            this.keydownSubject.next(event);
        });
    }
}

private keydownSubject: Subject<KeyboardEvent> = new Subject<KeyboardEvent>();

get keydown(): Observable<KeyboardEvent> {
    return this.keydownSubject.asObservable();
}

I then removed the @HostListener in the directive, and subscribed to this service's subject in ngOnInit:

export class KeydownEventDirective implements OnInit, OnDestroy {
    constructor(private keyboardService: KeyboardService) {}

    private keydown(e: KeyboardEvent) {
        this.doSomething(e);
    }

    private keydownSubscription: Subscription;
    ngOnInit() {
        this.keydownSubscription =
            this.keyboardService.keydown.subscribe(e => {
                this.keydown(e);
            });
    }

    ngOnDestroy() {
        this.keydownSubscription.unsubscribe();
    }

    ...
}

The solution sped up the page, and I have had difficulty discovering why this would be the case. Why would @HostListener or adding multiple event listeners to the window's keydown event be more detrimental to the page's performance than multiple subscriptions to an RxJS Subject? Could it be that angular HostListeners are not passive listeners by default?

• javascript
• angular
• typescript
• rxjs
• dom-events

• 5 My guess is that using @HostListener will trigger change detection every time you press a key on every instance of this directive. On the other hand when you use a service with window.addEventListener it doesn't. – martin Commented Aug 12, 2017 at 8:56
• I gathered that was the case, but my question is why is that more detrimental than multiple subscriptions to an RxJS Subject. They appear to be similar processes, and one could almost expect those subscriptions to have an identical effect on performance. – Braden Van Wagenen Commented Aug 12, 2017 at 15:12
• Pushing a value to a Subject is relatively simple operation (and predictable). But single iteration of change detections can be something between a single parison and hundreds of thousands of parisons. So it really depends on what your application does. – martin Commented Aug 14, 2017 at 7:46
• I understand that the Subject.next function is simple. My question is why the subscriptions respond faster than the event listeners. Is it that web browsers don't optimize that as much as I would have expected? Or is it that these events would simply need to be passive listeners to acplish the same result? If it's the latter, how would one do that with angular's HostListener? – Braden Van Wagenen Commented Aug 14, 2017 at 14:45
• The page loads quickly, but is slow to react to keydown events right? Looks like someone reported this problem already: github./angular/angular/issues/16986 By the way, registering lots of events can be (or could be) slow too: github./angular/zone.js/issues/798 I had a problem with thousands of tooltips on a page once because registering all the mouseenter and mouseleave events was slow. – Alexander Taylor Commented Nov 6, 2017 at 1:27

3 Answers 3

The answer lies in Angular's use of Zone.js. Angular uses Zone.js for its change detection. For information on how Zone.js works, I remend the thoughtram.io articles, Understanding Zones and Zones in Angular.

The initial problem was found in the performance of the page on each keystroke. Why would the events not be able to handle it efficiently? The problem was Angular's change detection. Zone.js monkey patches the DOM event listeners registration with its own functions. Angular takes advantage of this, making every DOM event with a listener also trigger change detection.

When multiple instances of a repeated ponent each had their own @HostListener on the window, they each independently triggered Angular's change detection. This resulted in Angular trying to check the entire application for changes at every key stroke for each ponent listening to the keyboard event. It's no wonder with that in mind that there was a performance issue.

The KeyboardService solved the problem because it only fires the change detection once. There is only one listener, and the RxJS Subject synchronously passes the event to each of the ponents' subscriptions within a singular Zone.js execution.

It is not related to the subject, First, the injectable service is singleton so there will be one instance provided for all your directives, second in that singleton service you register a single method in the constructor to handle the keydown event which calls a subject, if you print in the console a message you will see that there will be one call.

But using Hostlistener by directive there will be an event registered by tag and multiple execution on keydown event.

You're probably trying to catch the same event on multiple ponents, which will cause all of your subscription methods (private keydown(e: KeyboardEvent)) to execute no matter which key was pressed since you're adding an event listener on the global window level.

It's a lot better approach what you did in your service, although I'm pretty sure that you could also use

public emitter: EventEmitter<any> = new EventEmitter<any>();

@HostListener('window:keydown', ['$event'])
private keydown(e: KeyboardEvent) {
     this.doSomething(e);
}

private doSomething(event: any): void {
     this.emitter.emit(event);
}

inside your service and then have public EventEmitter or Subject on which your ponents can subscribe and catch the keyDown event.