1

I'm trying to build a performance monitor for my company's angular (2-6) apps. one of the things we want to show is the total amount of bindings on a page at any given moment. ALL OF THEM. Any ideas how to do that?

the great wizard of none
  • 21
  • 1
  • Hope this link help you https://stackoverflow.com/questions/446892/how-to-find-event-listeners-on-a-dom-node-when-debugging-or-from-the-javascript – Rohit.007 Jun 17 '18 at 18:30
  • What have you tried so far? – Dragonthoughts Jun 17 '18 at 19:33
  • Well, I know how to traverse the views tree. they have a "bindings" property with a number but that number counts 'ngFor' as 1, regardless of how many nodes it has.... – the great wizard of none Jun 17 '18 at 20:18
  • @Rohit.007 thanks but that didn't help much. I need something for angular binding specifically. However, it did give me some great ideas about how to show all my listeners! so thanks for that :-) – the great wizard of none Jun 17 '18 at 20:24
  • I recall in AngularJS it was useful to keep bindings count low, but have not seen it mentioned in Angular (2-6). Can you give some idea how you will use the metric? –  Jun 17 '18 at 21:44
  • @eric99 Well, as we see it- the more bindings, the more code runs on every tick. don't you think? It could be used to give a clear representation to the programmer about the "weight" of his or her page on NGZone and the CD process. – the great wizard of none Jun 17 '18 at 22:46
  • Indeed. [This](https://stackoverflow.com/questions/19385744/get-total-number-of-bindings-in-your-app-module) was the way to do it in AngularJS, but binding metric seems to have gone off the radar with Angular2. –  Jun 18 '18 at 00:10
  • 1
    You can start with this code and work your way towards the solution `constructor(cd: ChangeDetectorRef) { cd._view.def.nodes.forEach((n) => { n.bindings.forEach((b) => { console.log(b.name); }) }) }`. You'll need to call it recursively for each child view. You'll need to have the knowledge described in these articles https://blog.angularindepth.com/the-mechanics-of-property-bindings-update-in-angular-39c0812bc4ce and https://blog.angularindepth.com/here-is-why-you-will-not-find-components-inside-angular-bdaf204d955c – Max Koretskyi Jun 18 '18 at 09:59
  • Thanks @AngularInDepth.com! That's just about the code i have already. Problem is that ngfor counts as one, not counting any of it's dynamic content and trackby counts as one as well so when having a view with ngfor with trackby with a 1000 bound items, you get only 2 in the array – the great wizard of none Jun 18 '18 at 12:37
  • @thegreatwizardofnone, create a stackblitz demo – Max Koretskyi Jun 20 '18 at 05:21
  • @AngularInDepth.com we've decided to count DOM changes through the native chrome API instead. But I wrote a feature request after talking with Rob wormald about it. Thank you so much for your time and effort guys! – the great wizard of none Jun 23 '18 at 09:22
  • @thegreatwizardofnone, you're welcome. Can you give me the link to the feature request? – Max Koretskyi Jun 26 '18 at 08:44
  • @AngularInDepth.com sure! Here it is: https://github.com/angular/angular/issues/24612#issuecomment-399303697 – the great wizard of none Jun 26 '18 at 10:26

0 Answers0