What is the meaning of [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event in Angular 4 project?

Question

In my angular 4 web project, we got some violations.

1. [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive.
2. [Violation] 'DOMContentLoaded' handler took 183ms
3. [Violation] Forced reflow while executing JavaScript took 360ms

Our project details are

"@angular/core": "^4.0.0",
"@angular/cli": "^1.4.0",

What is the problem ?

Thanks

Answer 1

Remove the unnecessary touchstart listeners on the button toggle.

It was initially added to prevent it from capturing user events, however it's no longer necessary, because we have pointer-events: none on the element. This also fixes a warning that is being logged by Chrome.

If you use datatables plugin, select2 plugin, bootstrapSwitch plugin or some jquery libraries, some unnecessary use of (touchstart) events can be used. IF u check these kind of libraries or touchstart events these number of errors will decrease.