显示错误-“闪烁延迟任务以使滚动更平滑”

Question

我正在尝试使用angular构建ionic（1）应用程序。我不明白为什么我会收到这个警告

“Blink延迟任务以使滚动更平滑。您的计时器和网络任务的运行时间应少于50毫秒，以避免出现这种情况。请参阅。”https://developers.google.com/web/tools/chrome-devtools/profile/evaluate-performance/rail和https://crbug.com/574343#c40了解更多信息。”

当我使用页面滑块时，额外的警告是

msgstr"忽略了取消可取消=false的触摸事件的尝试，例如，因为滚动正在进行中，不能中断。"

由于主线程占线，“触摸启动”输入事件的处理延迟了835毫秒。考虑将事件处理程序标记为“被动”以使页面更加响应。

Answer 1

这些实际上是严重的警告。我在这个警告上花了太多时间。如果有长时间运行的javascript任务，如计时器或网络任务，那么它将被停止，直到你scrolling.then当滚动完成这些任务被恢复。所以在执行这些繁重的处理任务时特别小心。

Answer 2

可能是不相关的，但根据我的经验，基本上你得到了这个，因为你的角度/页面仍在集中处理。如果我在导航到一个新的状态后尝试过快地滚动，我通常会收到这样的警告——如果我等一秒钟就可以了。我的解决方案是禁用js滚动，以便在更相关的地方释放更多的能量。检查滚动。JS滚动（值）onhttp://ionicframework.com/docs/api/provider/$ionicConfigProvider/

Answer 3

此警告为“正常”。webview基本上是告诉你一些事件绑定到滚动事件甚至触摸事件，这可能会减慢应用程序的速度。例如，google文档建议使用时间间隔，而不是直接在touchmove/drag事件上运行计算或函数，这在带有webview的移动应用程序中并不总是可能的，这取决于您试图完成的UX操作。

此外，如果你确实使用了setInterval，你将不得不使用像10ms这样疯狂的计时，你的滚动/拖动看起来会非常糟糕。忘了这些警告吧，它们是非常通用且最有可能的指导方针，但大多数情况下无法避免。

如果您仍然希望避免警告，下面是一个jQuery示例。其思想是从事件中捕获任何值，然后在单独的线程上运行计算。

 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 
 }