Display error - "Blink postponed task to make scrolling smoother"

Question

I am trying to create an ionic application (1) using angular. I do not understand why I get this warning.

"Blink postponed the task to make the scrolling smoother. The timer and network tasks take less than 50 ms to avoid this. See https://developers.google.com/web/tools/chrome-devtools/profile/evaluate-performance/ rail and https://crbug.com/574343#c40 for more information. "

And additional warnings when I use page sliders,

"An attempt to cancel the touchmove event with cancelable = false is ignored, for example, because it is scrolling and cannot be interrupted."

"Processing the input event" touchstart "is delayed by 835 ms because the main thread is busy. Consider marking the event handler as" passive "to make the page more responsive."

Answer 1

These warnings are "normal." Web browsing basically tells you that some events are related to a scroll event or even a touch event, which can slow down the application. Google docs recommend, for example, using intervals instead of performing calculations or functions directly on touchmove / drag events, which is not always possible with a web-based mobile app depending on what you're trying to do UX.

Also, if you use setInterval, you will have to use crazy aggressive timings such as 10 ms and your scroll / drag will look very bad. Just forget these warnings, they are very general and most likely recommendations, but most of the time cannot be avoided.

If you still want to avoid the warning, here is a jQuery example. The idea is to catch any values ​​from the event, and then do the calculations in a separate thread.

var int, x, y; $('#mydiv').on('touchstart', function(event){ int = setInterval(work, 20); }); $('#mydiv').on('touchend', function(event){ clearInterval(int); }); $('#mydiv').on('touchmove', function(event){ x = event.touches[0].pageX; y = event.touches[0].pageY; }); function work(){ //how you can do whatever with xy without getting a warning } 

Answer 2

This may not be related, but in my experience, you mostly get this because your angular / page is still being processed intensively. I used these warnings if I tried to scroll too fast after the transition to a new state - if I waited a second, it would be nice. My solution was to disable js scrolling in order to free up more energy so that it is more relevant. Check scrolling.jsScrolling(value) at http://ionicframework.com/docs/api/provider/$ionicConfigProvider/

Answer 3

These are really serious warnings. I spent too long on this warning. If there is javascript running for a long time, such as a timer or a network task, it will stop until you scroll the page. Then, when scrolling is performed, these tasks resume. Therefore, when performing these heavy processing tasks, special attention was paid.