我收到一条警告，这使我的页面加载变得懒惰。 “向阻止滚动的‘鼠标滚轮’事件添加了非被动事件侦听器。”答案

【问题标题】：I am getting a warning which is making my page load lazy. "Added non-passive event listener to a scroll-blocking 'mousewheel' event."我收到一条警告，这使我的页面加载变得懒惰。 “向阻止滚动的‘鼠标滚轮’事件添加了非被动事件侦听器。”
【发布时间】：2019-03-04 11:26:03
【问题描述】：

我收到类似“向阻止滚动的‘鼠标滚轮’事件添加非被动事件侦听器”这样的警告。并建议我“考虑将事件处理程序标记为‘被动’以使页面更具响应性。”像我这样的新手很难理解。我在 element-ui 中使用 Axios、mixins、自动完成。页面运行良好，但加载时间很慢。

【问题讨论】：

标签： vue.js autocomplete axios element-ui

【解决方案1】：

这只是意味着您正在处理鼠标滚轮事件。如果处理程序正在做某事而不是正常事件，您可以忽略该消息。如果您正在执行除了正常事件之外的其他操作，您应该将passive 选项添加到侦听器，这样默认处理就可以在没有阻塞的情况下进行。

https://developers.google.com/web/tools/lighthouse/audits/passive-event-listeners

一般情况下，将passive 标志添加到每个wheel、mousewheel、 touchstart 和 touchmove 不调用的事件监听器 preventDefault().

如果它是一个包进行事件处理而不是您自己的代码，请忽略它。

【讨论】：

谢谢@Roy J，这两个警告之间是否有任何关系，1）鼠标滚轮事件，2）[违规]执行 JavaScript 时强制重排需要 34 毫秒。我到最后，有时它会增加到 80 ......我认为加载时间
如果它发生在你滚动的时候，那么可能是的。否则，没有。我的猜测可能不是。这可能只是与复杂的布局有关。