Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive'

当你在网页上添加了一个阻止默认滚动行为的鼠标滚轮('mousewheel')事件监听器时，通常这意味着当你滚动页面时，事件处理程序会捕获并响应滚轮操作，而不是让浏览器自然地滚动内容。然而，现代浏览器为了提高性能，尤其是对于触摸设备，会启用一种名为“被动事件队列”(Passive Event Listeners)的概念。

如果你的事件监听器没有标记为"passive"，在某些条件下可能会导致性能问题。因为浏览器在判断事件是否可以被动处理时，它会检查当前是否有足够的渲染任务正在运行。如果检测到浏览器正在忙于其他密集型计算，如动画、重绘等，它会将滚动事件放入被动队列，这样处理函数就不会阻塞浏览器的工作线程，允许滚动继续。

标记事件为"passive"意味着告诉浏览器这个事件处理无需阻止默认行为，可以安全地异步处理。这对于大型滚动视图或者复杂的交互场景尤为关键，可以避免不必要的性能开销。示例如下：

element.addEventListener("mousewheel", function(event) {
  event.preventDefault(); // 阻止默认滚动
  event.stopPropagation(); // 如果需要，阻止事件向上冒泡
  event.passive = true; // 标记为被动处理
  // 这里是你的处理代码...
}, { passive: true });

相关问题

[Violation]Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive

这个问题是关于网页的性能优化。当浏览器遇到一个阻塞滚动的事件处理程序时，它会发出这个警告。通常情况下，你可以通过将事件处理程序标记为"被动"（passive）来解决这个问题，以提高页面的响应能力。

被动事件处理程序是指不会调用 `preventDefault()` 方法的事件处理程序。通过这样做，浏览器可以更好地优化滚动性能，因为它知道事件处理程序不会阻止默认的滚动行为。

要解决这个问题，你可以修改事件处理程序的选项来将其标记为被动。具体的实现方式取决于你使用的 JavaScript 框架或库。在大多数情况下，你可以通过传递一个选项对象作为第三个参数来指定事件处理程序的选项，并将 `passive` 属性设置为 `true`。例如：

element.addEventListener('mousewheel', handler, { passive: true });

这样做后，浏览器就不会再发出这个警告了，并且页面的滚动性能也会得到提升。

Added non-passive event listener to a scroll-blocking 'wheel' event. Consider marking event handler as 'passive' to make the page m

当您在一个可能会阻止滚动的`wheel`事件上添加了一个非被动(event passive)的事件监听器，浏览器为了防止意外滚动而默认会阻止该事件的默认行为（例如滚动处理）。如果页面设置了`event.preventDefault()`，那么用户通常无法通过滚轮滚动内容，除非他们手动触发这个事件监听器。

将事件监听器标记为"被动"(passive)可以改变这种行为，允许用户的滚动操作自然发生，同时让您的事件处理程序仍然可以在事件流中运行。被动事件监听器告诉浏览器，它不需要阻止滚动，并且它承诺不会阻塞滚动。这对于性能优化有帮助，因为浏览器不必检查每个被动事件是否需要阻止滚动。

在JavaScript中，你可以这样添加被动事件监听器：

element.addEventListener('wheel', yourEventHandler, { passive: true });