ChangeDetection triggered onEnter and onLeave

ChangeDetection triggered onEnter and onLeave

Posted by: tie_entwicklung on 28 March 2018, 3:49 am EST

• 

  tie_entwicklung

  • Post Options:
  • Link
    Copy

  Posted 28 March 2018, 3:49 am EST

  Hi

  I’m working on an angular app with wijmo version 5.20173.409
  
  I’ve noticed that IE11 has major performance issues when using the flexgrid and narrowed it down to it recalculating styles too often.
  
  After more research I found out that Angular ChangeDetection is triggered whenever I move over a different DOM Element (pointerEnter/Leave). Keep in mind that I’m using the default ChangeDetection Strategy, not OnPush. I have also tested this in a new application with just a wijmo component and nothing else. Same behaviour.

  TLDR: wijmo registered events trigger changeDetection way too often

  This cannot be the intended behaviour, right?

• 

  abhishek.dutta

  

  • Post Options:
  • Link
    Copy

  Posted 28 March 2018, 6:18 pm EST

  Hi,

  This is known issue and our Team is working on this actively, I have added you as a correspondent to the case with Tracking ID (Internal) 308467. You will be notified once this case is fixed.

• 

  tie_entwicklung

  • Post Options:
  • Link
    Copy

  Posted 3 April 2018, 12:07 am EST

  is there an ETA?

  I’d fix it myself but have not yet managed to include the source in my application, only the minified version works.

• 

  abhishek.dutta

  

  • Post Options:
  • Link
    Copy

  Posted 3 April 2018, 2:13 pm EST

  Hi,

  I have requested the concerned team to prioritize the issue, team is actively working on this but currently I am unable to provide an ETA

• 

  james.ingham

  • Post Options:
  • Link
    Copy

  Posted 13 February 2019, 2:49 pm EST

  May I ask how this issue is going? I am having exactly the same problem for years. Wijmo’s flexGrid component triggers change detection too often, especially the mousemove and scrolling event, and there seems to be no way for the caller to control it.

  Ideally the heavy operations in Wijmo should be put inside “zone.runOutsideAngular()” wrapper which prevents CD from being triggered.

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 14 February 2019, 4:35 pm EST

  Hi James,

  Our dev has optimised the changeDetection significantly in the nightly build(5.20183.567-nightly.d20190213.t2200). You may confirm the same from the following sample which uses the nightly build:
  
  https://stackblitz.com/edit/angular-zv4is9?file=src%2Fmain.ts
  
  In the above sample, move/scroll the mouse over FlexGrid and check the console.

  P.S.: Nightly builds are not tested for production and should not be used in the production builds.

• 

  james.ingham

  • Post Options:
  • Link
    Copy

  Posted 17 February 2019, 11:47 am EST

  Cool. thanks for the quick test.

  When do you reckon this can go to production?

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 17 February 2019, 4:46 pm EST

  The fix will be included in the next stable build which is expected to be released by mid-march.

• 

  james.ingham

  • Post Options:
  • Link
    Copy

  Posted 18 February 2019, 9:22 am EST

  Thanks. BTW, I tried the sample from your nightly build. It looks like CD is fixed on mousemove, however, scrolling still triggers it a lot. Could you help double check?

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 18 February 2019, 4:20 pm EST - Updated 3 October 2022, 11:08 am EST

  We are unable to replicate the issue at our end. We tested the sample again, and it seems that CD is fired is fired only once per scroll event.
  
  We have attached a gif with our observation, could you please have a look at it and let us know if you are having any different observations.
  
  
  
  Also, please note that the app is still running in dev mode so CD seems to be firing twice per scroll but it should not be the case in prod mode.

• 

  james.ingham

  • Post Options:
  • Link
    Copy

  Posted 20 February 2019, 4:16 pm EST

  Thanks for your prompt reply. I think you are right that CD is only fired once or twice per scrolling. However the concern is that users often scroll by using their mouse’s mid-button which will fire a lot of events.

  Is it possible to use debounceTime (or throttling) to only fire CD when we know the scrolling events are “over”. i.e. no new scrolling events occur within 500 ms?

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 21 February 2019, 6:29 pm EST

  Hi James,

  Thanks for your valuable feedback. However, It doesn’t look feasible to throttle CD in the grid. There are a lot of things that need to be done during the scrolling of the grid.
  
  Further, we have escalated the case to dev team for their input regarding this. We will let you know as we get an update on this.

• 

  james.ingham

  • Post Options:
  • Link
    Copy

  Posted 19 March 2019, 10:17 am EST

  Hi,

  Just noticed same problem is happening if you resize grid columns. I think this operation also triggers CDs a lot.

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 19 March 2019, 4:27 pm EST

  Hi James,

  We are able to replicate the issue at our end and hence we have forwarded it to the concerned team for further investigation with internal tracking Id 371671. We will let you know regarding any updates on this issue.

  Thanks for reporting.