0

I am working on large angular app and I have a couple of scroll listener to adjust positions. When user scroll in main browsers, all is good but in IE 11, the scrolling is delayed for about 1 second and it's incredibly slow.

When debugging, I isolated the problems and by removing scrolling listeners, it fixed the issue and the scrolling was smooth in IE. The problem is that even empty scroll listener is creating this unpleasant delay scrolling experience (also tried HostListener but obviously same result). 

window.addEventListener('scroll', () => {
});

When I remove it or add zone.runOutsideAngular, all is fine

this.zone.runOutsideAngular(() => {
  window.addEventListener('scroll', () => {
  });
});

But our other app using similar modules (with some customization) is running fine without the zone.runOutsideAngular. So I wonder what is so different and I tried to isolate the problem further but couldn't find any clue. Is there any way how to debug the performance and find what is causing the slowdown and bad experience on scroll in IE?

Performance in IE11 on scroll:

enter image description here

Performance in Chrome on scroll is fine and pretty smooth:

enter image description here

Edit: The scroll event for a single scroll up to down is around 15x, very slowly appearing. Usually, it should be way more and quickly.

Petr
  • 1,853
  • 2
  • 25
  • 49
  • May be this will help: https://stackoverflow.com/questions/58944077/how-to-find-which-async-action-triggers-ngzone-that-lead-to-change-detection/59044196#59044196 – Chellappan வ Feb 25 '20 at 09:40
  • @Chellappanவ thanks for the link, good tips but didn't help with this problem – Petr Feb 25 '20 at 17:04
  • I am not sure what could cause problem on IE, But Check this as well https://alligator.io/js/speed-up-scroll-events/ – Chellappan வ Feb 25 '20 at 17:23
  • Perhaps the issue is related to the Angular change detection, when calling the scroll event, it will trigger Angular change detection in IE browser. After using the runOutsideAngular, it could reduce significantly amount of changeDetection calls. Please check the following articles: [Link 1](https://medium.com/@krzysztof.grzybek89/how-runoutsideangular-might-reduce-change-detection-calls-in-your-app-6b4dab6e374d), [Link 2](https://stackoverflow.com/questions/37315781/) and [Angular Change Detection](https://blog.angular-university.io/how-does-angular-2-change-detection-really-work/). – Zhi Lv Feb 26 '20 at 06:59

0 Answers0