I wrote a library for a third party component provider, which basically adds some new features to one of it's components. Everything was fine, performance was fine, all OK. All was written with the default change detection mechanism and with use of zone.js.

Now, I updated both Angular and the third party component to the latest, and I get console warnings like [Violation] 'setTimeout' handler took 537ms and [Violation] Forced reflow while executing JavaScript took 222ms. And the page becomes noticeable slow. Before the updating I also got this kind of warnings, but the delays were like 10 to 50 ms.

Before or after updating, I didn't add any new code to the library. The only changes were the updating to the latest versions. I guess, it must be some internal changes in the third party component.

The question is, how can I trace this warnings? I'm more interested in the setTimeout warning, but also the forced reflow could be interesting.

Thansk.

I wrote a library for a third party component provider, which basically adds some new features to one of it's components. Everything was fine, performance was fine, all OK. All was written with the default change detection mechanism and with use of zone.js.

Now, I updated both Angular and the third party component to the latest, and I get console warnings like [Violation] 'setTimeout' handler took 537ms and [Violation] Forced reflow while executing JavaScript took 222ms. And the page becomes noticeable slow. Before the updating I also got this kind of warnings, but the delays were like 10 to 50 ms.

Before or after updating, I didn't add any new code to the library. The only changes were the updating to the latest versions. I guess, it must be some internal changes in the third party component.

The question is, how can I trace this warnings? I'm more interested in the setTimeout warning, but also the forced reflow could be interesting.

Thansk.

• javascript
• angular

Share Improve this question Follow asked Mar 25 at 19:02 derstaunerderstauner 1,86233 gold badges2727 silver badges5555 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Check for usage of setTimeout throughout your project.

After identifying, you can try either of these approaches:

• Comment out all of them and enable them one after another till you find the culprit.

• Try enabling changeDetection: ChangeDetectionStrategy.OnPush to reduce the number of change detection cycles (Which improves performance). Then call this.changeDetectorRef.detectChanges() to fill in the places where change detection does not fire, which you will observe as bugs in your library.