我使用的是 Chrome 版本:版本 55.0.2883.75 beta(64 位) 和 material-ui ( https://github.com/callemall/material-ui ) 版本 0.16.5 与 react+react-dom version 15.4.1 并在我用鼠标滚轮向下滚动页面时注意到以下警告消息:
Handling of 'wheel' input event was delayed for xxx ms due to main thread being busy. Consider marking event handler as 'passive' to make the page more responsive.
这是来自 chrome 开发控制台的屏幕截图:
最初，我认为是其他依赖项 react-waypoint 导致了这个问题，但经过一些调查，感谢 lencioni 在 https://github.com/brigade/react-waypoint/issues/143 中的跟进, 我意识到这可能是 react 与最新版本的 material-ui 结合使用造成的。
使用 material-ui 版本 0.16.5，wheel 事件监听器在 Chrome 的 Dev Tool Element 选项卡中变得可见，如下所示:
具有 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 方依赖项的十字路口，并试图了解导致此问题的变量以及我们作为消费者是否有任何问题这些库，可以解决这个问题吗？
如有任何建议或意见，我们将不胜感激!谢谢。
最佳答案
只是确认是 material-ui 导致了这个问题，因为我没有使用“react-waypoint”并且也在 MaterialUI v0.16.5 和 React 15.4.x 上体验过它。
更新:更新到 MaterialUI v0.16.6 后，一切似乎对我来说工作正常。
关于javascript - 由于主线程正忙， 'wheel' 输入事件的处理延迟了 xxx 毫秒，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41152327/