Error showing - "Blink deferred a task in order to make scrolling smoother"

Question

I am trying to build ionic(1) app using angular. I do not understand why am i getting this warning

"Blink deferred a task in order to make scrolling smoother. Your timer and network tasks should take less than 50ms to run to avoid this. Please 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 am using page sliders is

"Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted."

"Handling of 'touchstart' input event was delayed for 835 ms due to main thread being busy. Consider marking event handler as 'passive' to make the page more responsive"

Answer 1

This warnings are "normals". The webview is basically telling you that some events are bound to the scroll event or even the touch event and that might slow down the app. The google docs recommend for instance to use intervals instead of running calculations or functions directly on the touchmove/drag events, which is not always possible with a mobile app with webview depending on what you are trying to accomplish UX wise.

Moreover, if you do use a setInterval, you will have to use crazy aggressive timings like 10ms and your scroll/drag will look really bad. Just forget these warnings, they are very generic and most likely guidelines but most of the time can't be avoided.

If you still want to avoid the warning, here is a jQuery example. The idea is to catch whatever values from the event and then run calculations on 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 x y without getting a warning 
 }

Answer 2

Might be unrelated, but from my experience, basically you're getting this because your angular/page is still intensively processing. I used to get this warnings if I tried to scroll too quickly after navigating to a new state -- if I waited a sec it would be ok. My solution was to disable the js scroll to release more power to where it was more relevant. Check scrolling.jsScrolling(value) on http://ionicframework.com/docs/api/provider/$ionicConfigProvider/