Angular2 Zone.js and requestAnimationFrame - CPU usage is very high

[hragavan]

I am seeing the same issue as the one here : #2912. I am using zone.js 0.6.10 and I still see it. I have a map which on move calls requestAnimationFrame but since my CPU usage is high, map move crashes.

[robwormald]

Could you reproduce this in a plunker please? It's very difficult to troubleshoot such things without a code sample to verify.

[PatrickJS]

please run any calls to requestAnimationFrame outside of angular.

class App {
  constructor(public ngZone: NgZone) {

    this.ngZone.runOutsideAngular(() => {

      requestAnimationFrame(() => {
      });

    });
  }
}

[pxwise]

Thanks @gdi2290. This got us on the right path to unwrapping our map library requestAnimationFrame calls from Zone.js.

[ericmartinezr]

@gdi2290 any particular reason to run requestAnimationFrame outside angular? I have a little project using it inside and all works fine, probably I'm not abusing it. What would be that reason? I don't see a high usage of CPU in my case. Thanks.

[PatrickJS]

related #2912

[hragavan]

Thanks @gdi2290. Moving our map calls outside of zone.js worked!

[ghetolay]

@gdi2290 this is more a zonejs related question but it fits well in this thread :
Can't we just call directly the native browser function ?
Found out zonejs keep the native function under the name __zone_symbol__requestAnimationFrame.
What may be wrong about using it directly ?

[PatrickJS]

that's super private (double _) so you can't guarantee that it will be __zone_symbol__requestAnimationFrame in the future. runOutsideAngular returns whatever is returned by the callback so you can change it to

    var cancel = this.ngZone.runOutsideAngular(() => requestAnimationFrame(() => {
      // do stuff
    }));
    cancelAnimationFrame(cancel)

[ghetolay]

I was more asking if runOutsideAngular() had another purpose we could miss by calling the native function directly. But it seems not so thank you.
I'll be a bad guy and go for the private reference (or create my own public one before running zonejs).

[harryjubb]

I'm using a 3rd party library that calls requestAnimationFrame, and am seeing the CPU usage of Google Chrome Helper go through the roof when I'm using it.

Is there anything I can do about this when I don't have control over when requestAnimationFrame is called?

[PatrickJS]

@harryjubb whenever you use the 3rd party module you can run it outside of the zone

// in zone
var value = moment.yolo()
// outside
var value = this.ngZone.runOutsideAngular(() => moment.yolo());

[harryjubb]

@gdi2290 Thank you, I was a bit nervous about trying it because I wondered if it would break any of the interactions between the 3rd party module (NGL: https://github.com/arose/ngl) and my app, but from what I can tell so far just running the constructor for the WebGL stage it creates outside of the Angular Zone works, CPU usage is much lower, and the events it emits are still picked up by my app as far as I can tell.

this.ngZone.runOutsideAngular(() => {
      this.stage = new NGL.Stage("ngl-stage");
    });

Thanks for your help.