由于主线程正忙，“wheel”输入事件的处理延迟了 xxx 毫秒

Posted 2023-02-22

【中文标题】由于主线程正忙，“wheel”输入事件的处理延迟了 xxx 毫秒

【英文标题】：Handling of 'wheel' input event was delayed for xxx ms due to main thread being busy

【发布时间】：2017-04-30 08:34:36

【问题描述】：

我使用的是 Chrome 版本：Version 55.0.2883.75 beta (64-bit) 和 material-ui (https://github.com/callemall/material-ui) 版本 0.16.5 和 react+react-dom 版本 15.4.1 并在我向下滚动页面时注意到以下警告消息鼠标滚轮：

。考虑将事件处理程序标记为“被动”以使页面更具响应性。

这是来自 chrome 开发控制台的屏幕截图：

最初，我认为是另一个依赖 react-waypoint 导致了问题，但经过一番调查，感谢 lencioni 对 https://github.com/brigade/react-waypoint/issues/143 的跟进，我意识到这可能是由 react 与最新版本的组合引起的material-ui.

使用material-ui 版本0.16.5，wheel 事件侦听器将在 Chrome 的开发工具元素选项卡中可见，如下所示： 它具有passive: false 属性，可以解释为什么在主线程忙时滚动时控制台上会出现警告。

但是，通过阅读类似的帖子 Consider marking event handler as 'passive' to make the page more responsive，我有点困惑，因为这表明我们可能需要等待你的 .js 库实现支持。在在 github 上提出问题建议这种改进之前，我的困惑是，我们应该具体等待哪个 JS 库/依赖项？

在这种特殊情况下，是react（参见discussion）吗？或material-ui？还是这个问题完全遗漏的其他内容？上面的截图表明wheel事件监听器是由react-dom的ReactEventListener添加的，但是，通过将material-ui版本降级为0.16.4，警告消失了，因为没有wheel事件监听器。

所以我基本上处于浏览器、react 和第 3 方依赖项的十字路口，并试图了解导致此问题的变量以及 作为这些库的消费者，我们是否可以如何解决这个问题？

任何建议或 cmets 将不胜感激！谢谢。

【参考方案1】：

只是确认它是 material-ui 造成的，因为我没有使用“react-waypoint”，并且在 MaterialUI v0.16.5 和 React 15.4.x 上也遇到了它。

更新：更新到 MaterialUI v0.16.6 后对我来说一切正常。

【讨论】：

使用 v0.16.7 仍然收到警告

我在 React 16.12.0 上得到了这个