2

We have an Angular 7 project that generates a Custom Element with Angular Elements. This Custom Element is used in a React project and in an AngularJS project. When the code of the Custom Element is loaded in one of these projects, the site is slowed down by around 30% - even if the Custom Element is not rendered into the DOM!

Performance analysis shows that the methods invokeTask() and runTask() from zone.js are called very often.

I tried to blacklist the events as it is described in https://github.com/angular/zone.js/blob/master/STANDARD-APIS.md but this had no effect.

The dependencies in packages.json are:

"dependencies": {
    "@angular/animations": "^7.2.7",
    "@angular/cdk": "^7.3.3",
    "@angular/common": "^7.2.7",
    "@angular/compiler": "^7.2.7",
    "@angular/core": "^7.2.7",
    "@angular/elements": "^7.2.7",
    "@angular/forms": "^7.2.7",
    "@angular/http": "^7.2.7",
    "@angular/material": "^7.3.3",
    "@angular/platform-browser": "^7.2.7",
    "@angular/platform-browser-dynamic": "^7.2.7",
    "@angular/router": "^7.2.7",
    "@angular/upgrade": "^7.2.7",
    "compass-mixins": "^0.12.10",
    "core-js": "^2.5.4",
    "dateformat": "^3.0.2",
    "devextreme": "^18.2.6",
    "devextreme-angular": "^18.2.6",
    "devextreme-intl": "^18.2.6",
    "in-view": "^0.6.1",
    "jquery": "^3.0.0",
    "keycode": "^2.1.9",
    "lodash": "^4.17.5",
    "material-design-icons": "^3.0.1",
    "moment": "^2.22.2",
    "muuri": "0.5.4",
    "ng2-nouislider": "^1.7.13",
    "nouislider": "^12.1.0",
    "reflect-metadata": "^0.1.12",
    "rxjs": "6.4.0",
    "rxjs-compat": "^6.0.0-rc.0",
    "zone.js": "^0.9.0"
  },

So my question is: why is zone.js listening to events even if the Custom Element is not rendered in the DOM? How is it possible to make the site faster again?

Update: I also tried setting ChangeDetection to onPush, but the issue remains.

user1916076
  • 145
  • 1
  • 16
  • 30% is a MASSIVE performance hit. Way beyond anything that would be caused by zones alone. Saying that zones is the problem is like complaining that the `main()` function in C++ is slow so you should remove it. With that said, here's a tutorial on how to completely remove zones. Maybe after you do that you'll get a better idea of where the problem is. https://blog.angularindepth.com/do-you-still-think-that-ngzone-zone-js-is-required-for-change-detection-in-angular-16f7a575afef – Reactgular Apr 03 '19 at 15:16
  • But why are the methods called so often even when my custom element is not rendered at all into the dom? – user1916076 Apr 04 '19 at 07:06
  • You can post an issue in `zone.js` repo with a reproduce repo. I can check it. – jiali passion Jun 14 '19 at 08:32

1 Answers1

0

I would keep out of touching ZoneJS settings, since it would heavily affects Angular itself.

I had a similar experience with a component that every time was created slowed down because there was a circular dependency. My guess is that there is something in your code, more probably with dependencies, that leads to multiple events generated.

bracco23
  • 2,181
  • 10
  • 28
  • Thank you for the hint. The thing is: the "slowing down" behaviour happens even if the custom component is not created at all. – user1916076 Apr 04 '19 at 08:52
  • I discovered the problem by adding logs in key moments of the life of my component ( during constructor, initialization and destroy ), you could do something similar and see what happens. It is a tricky problem to debug and the complexity of ZoneJS inside Angular makes it really difficult to use debuggers. – bracco23 Apr 04 '19 at 09:05