错误显示 - "闪烁延迟任务以使滚动更顺畅"

Question

我正在尝试使用角度来构建离子(1)app.我不明白为什么我会收到这个警告

"Blink推迟了一项任务,以使滚动更顺畅.您的计时器和网络任务运行时间不应超过50毫秒,以避免这种情况.请参阅https://developers.google.com/web/tools/chrome-devtools/profile/评估性能/铁路和https://crbug.com/574343#c40获取更多信息."

当我使用页面滑块时,还有其他警告

"忽略尝试使用cancelable = false取消touchmove事件,例如因为滚动正在进行且无法中断."

"由于主线程忙,"触摸启动'输入事件的处理延迟了835毫秒.考虑将事件处理程序标记为"被动"以使页面响应更快"

Answer 1

此警告是“正常”的。Web 视图基本上告诉您某些事件绑定到滚动事件甚至触摸事件，这可能会减慢应用程序的速度。例如，谷歌文档建议使用间隔，而不是直接在触摸移动/拖动事件上运行计算或函数，这对于带有 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 
 }