Ngx-charts: perf: run logic outside ngZone

Created on 6 Aug 2018 · 5Comments · Source: swimlane/ngx-charts

I'm submitting a ... (check one with "x")

[x] bug report - search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request - use StackOverflow (add the ngx-charts tag) or the gitter chat for support questions

Current behavior
The mouseOver event runs inside the ngZone, which leads to hundreds of Angular check which impacts performance.

Expected behavior
Some events must run outside the ngZone, only template changes should run inside the ngZone.

Reproduction of the problem
https://stackblitz.com/edit/angular-ks78z1?file=src%2Fapp%2Fapp.component.html

What is the motivation / use case for changing the behavior?
Perf matters.

ngx-charts version: 9.0.0
Angular version: 6.1.1
Browser: N/A
Language: N/A

Source

Ploppy3

👍3

Most helpful comment

The event is not the problem, the problem is that it runs in the zone.
One solution could be to register the event with regular js:

private showToolTip = false;

constructor(
  private ngZone: NgZone
) { }

myFunction(){
  ngZone.runOutsideAngular(() => {
      node.addEventListener('mouseover', () => {
        // compute the new state of the tooltip
        let new_showToolTip = ...
        // detect if the state changes
        if(new_showToolTip != this.showToolTip ){
          // if it does, run inside ngZone, this will trigger change detection
          ngZone.run(() => {
            this.showToolTip = new_showToolTip;
          })
        } // if not, it will not trigger change detection
      })
  })
}

I don't think there is a memory impact since no additional variables are used.

Even though the computation is a tiny bit more heavy, in the end you skip hundreds of change detection cycles.

Ploppy3 on 6 Aug 2018

👍3

All 5 comments

The mouseOver event is needed for the tooltip. Any idea how to make that work without a mouseOver event?

marjan-georgiev on 6 Aug 2018

The event is not the problem, the problem is that it runs in the zone.
One solution could be to register the event with regular js:

private showToolTip = false;

constructor(
  private ngZone: NgZone
) { }

myFunction(){
  ngZone.runOutsideAngular(() => {
      node.addEventListener('mouseover', () => {
        // compute the new state of the tooltip
        let new_showToolTip = ...
        // detect if the state changes
        if(new_showToolTip != this.showToolTip ){
          // if it does, run inside ngZone, this will trigger change detection
          ngZone.run(() => {
            this.showToolTip = new_showToolTip;
          })
        } // if not, it will not trigger change detection
      })
  })
}

I don't think there is a memory impact since no additional variables are used.

Even though the computation is a tiny bit more heavy, in the end you skip hundreds of change detection cycles.

Ploppy3 on 6 Aug 2018

👍3

@marjan-georgiev Tell me if you need more information!

Ploppy3 on 17 Aug 2018

4ctarus on 8 Nov 2018

@Ploppy3 @4ctarus https://github.com/swimlane/ngx-charts/issues/1162#issuecomment-510093587

workaround -- I'll be making a pull request from ngx-charts-extra later this month, need to further test possible side-effects as it's a major change.