Currently, I am working with Angular2 (r.2.0.0) along with typescript (v.1.8.10). I have encountered an issue where Chrome does not respond while scrolling and displays a warning message stating: "Handling of 'mouse wheel' input event was delayed for 236 ms due to main thread being busy. Consider marking event handler as 'passive' to make the page more responsive."
The problem arises when using websocket messages, as received messages are unable to trigger during scrolling. Only after finishing the scroll activity do all the received messages start processing. I came across a similar issue on this link but unfortunately, it did not resolve my particular challenge.
Below is a snippet of the HTML code in question:
<canvas id="{{ReferenceLineCanvasName}}" (mousewheel)="OnMouseWheel($event)" (dblclick)="OnMouseDoubleCliked()" (mouseout)="OnMouseUp($event)" (mousedown)="OnMouseDown($event)" (mouseup)="OnMouseUp($event)" (mousemove)="OnMouseMove($event)" class="reference_canvas_class"></canvas>
And here is a glimpse into the TypeScript code:
public OnMouseWheel(event: any): any {...sending message to server via websocket...}
public SocketMessageReceived(stream: any): any {..not functioning during scroll events...}