angularjs - 警告 : Added non-passive event listener to a scroll-blocking 'touchmove' event when md-select is in md-tabs

Question

我在使用 Angular Material 的 angularjs 应用程序中遇到性能问题。

我有一个 <md-select>有很多选项(大约 1300 个)和这个 <md-select>在 <md-tab> 中标签。在页面加载时，我的页面卡住。这可能是由于 Google Chrome 的事件被动监听器，因为我在我的 js 控制台中得到以下日志:

[Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952

您可以找到重现我的问题的代码笔:https://codepen.io/jjalal/pen/vWxYbv .当从 Harry 切换到 John 时，页面卡住(这在我的应用程序中更为明显)。如果您打开 js 日志并将日志级别设置为“所有级别”(启用详细级别)，您可以看到 3000 条日志(我有 3 个选择，每个有 1000 个选项)。

我在一些答案中看到我应该将事件 passive 设置为 true，比如 this :

document.addEventListener('touchmove', function(e) {
    e.preventDefault();
}, { passive: true });

但这并没有解决我的问题。

如有任何帮助，我们将不胜感激。

Answer 1

最近(两天前)遇到了一个非常相似的问题，经过数小时的研究，我不得不意识到这在不久的将来不会得到解决。请引用this question以及接受的解释答案。 (还要查看带有“无法修复”标签的 angularjs github issue)

关于一种解决方案:

问题是 100% 与浏览器有关(甚至不要在 IE 中尝试，它会卡住并显示“长时间运行的脚本”)和 DOM 渲染，而不是在您的代码中。所以我一直在尝试，不断尝试，一个一个地删除了 DOM 的微小部分(完整的容器 div、按钮、段落，无论我能找到什么)。在某一时刻，我能够确定导致问题的原因。我有一个可拖动的项目，其中包含一个可点击的 md-icon，并且该图标有一个悬停 md-tooltip。现在您看到它有 3 个事件(拖动项目、单击按钮和悬停按钮)发生了碰撞。删除 md-tooltip 后，它就像一个魅力。我的建议是让您开始确定究竟是什么导致了这种情况。 真正的解决方案将不得不等待......