Question

我在使用角度材料的angularjs应用程序中遇到了性能问题。

我有一个<md-select>有很多选项（大约1300），这个<md-select>位于<md-tab>标记中。在页面加载时，我的页面冻结。这可能是由于谷歌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

您可以找到可以重现我的问题的codepen：https://codepen.io/jjalal/pen/vWxYbv。当从Harry切换到John时，页面冻结（在我的应用程序中更明显）。如果您打开js日志并将日志级别设置为＆＃39;所有级别＆＃39; （启用详细级别），您可以看到3000个日志（我有3个选择，每个1000个选项）。

我在一些答案中看到，我应该将事件被动设置为真，如this：

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

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

任何帮助都将不胜感激。

Answer 1

最近（两天前）有一个非常相似的问题，经过几个小时的研究后，我不得不意识到这是在不久的将来不会被解决的问题。请参阅this question和接受的答案以获得解释。（另请查看angularjs github issue，其中包含标记＆＃39;无法修复＆＃39;）

关于种 解决方案：

问题是100％使用浏览器（甚至不在IE中尝试，它会冻结注释和长时间运行的脚本＆＃39;）和DOM渲染而不是代码。所以我一直在尝试和尝试，逐个删除DOM的小部分（完整的容器div，按钮，段落，我能找到的任何东西）。有一次，我能够找出导致问题的原因。我有一个可拖动的项目，其中包含一个可点击的md-icon，该图标有一个悬停的md-tooltip。现在你看到它有3个事件（拖动项目，点击按钮并悬停按钮），它们相互碰撞。删除md-tooltip后，它就像一个魅力。我的建议是让你开始确定究竟是什么导致这种情况。 真实解决方案必须等待......

警告：为滚动阻止＆touchmove＆＃39;添加了非被动事件监听器。 md-select位于md-tabs

1 个答案: