angularjs - 显示错误 - "Blink deferred a task in order to make scrolling smoother"

Question

我正在尝试使用 angular 构建 ionic(1) 应用程序。
我不明白为什么会收到此警告

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

我使用页面 slider 时的其他警告是

“忽略取消使用可取消 = false 的 touchmove 事件的尝试，例如因为滚动正在进行中且无法中断。”

“由于主线程繁忙，‘touchstart’输入事件的处理延迟了 835 毫秒。考虑将事件处理程序标记为‘被动’以使页面响应更快”

Answer 1

这个警告是“正常的”。 webview 基本上是在告诉您某些事件绑定(bind)到滚动事件甚至是触摸事件，这可能会减慢应用程序的速度。例如，谷歌文档建议使用间隔，而不是直接在 touchmove/drag 事件上运行计算或函数，这对于带有 webview 的移动应用程序并不总是可行的，具体取决于您尝试完成 UX 明智的事情。

此外，如果你确实使用了 setInterval，你将不得不使用疯狂的激进时间，比如 10 毫秒，并且你的滚动/拖动看起来真的很糟糕。
忘记这些警告吧，它们是非常通用且最有可能的指导方针，但大多数时候是无法避免的。

如果您仍然想避免警告，这里有一个 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 
 }