一招教你解决Vue中恼人的[Violation] Added non-passive event listener警告

2023-03-25 10:45:01

避免[Violation] Added non-passive event listener警告：使用Passive事件监听器优化前端性能

在基于Element-ui构建的Vue项目中，你可能会在Chrome浏览器的控制台中看到[Violation] Added non-passive event listener to a scroll-blocking event. Consider making it passive or using addEventListenerOptions来代替 addEventListener警告。这个警告意味着什么呢？

理解[Violation] Added non-passive event listener警告

简单来说，这是浏览器对页面性能的友好提醒。它指出你向一个可能阻塞主线程的事件添加了一个非passive事件监听器。当浏览器检测到这种非passive事件监听器时，它会发出警告，提醒你可能存在性能问题。

为何需要passive事件监听器？

为了理解passive事件监听器的必要性，我们需要了解浏览器在处理事件时面临的挑战。当一个事件发生时，浏览器需要暂停正在执行的任务，转而去处理该事件。这可能会导致页面出现卡顿或延迟，尤其是当事件处理程序过于复杂或耗时时。

为了解决这个问题，浏览器引入了passive事件监听器。passive事件监听器告诉浏览器该事件处理程序不会阻止默认行为，例如滚动或缩放。这允许浏览器在处理事件时继续执行其他任务，从而避免页面卡顿或延迟。

如何解决[Violation] Added non-passive event listener警告？

解决[Violation] Added non-passive event listener警告的方法很简单，只需将非passive事件监听器改为passive事件监听器即可。具体步骤如下：

首先，找到触发警告的代码。通常情况下，它位于使用addEventListener()方法添加事件监听器的位置。
在addEventListener()方法的第三个参数中，将useCapture设置为false，并将passive设置为true。
现在，浏览器将把该事件监听器识别为passive事件监听器，并不会在事件处理程序执行时阻塞主线程。

示例

// 非passive事件监听器
element.addEventListener('scroll', myEventHandler, false);

// passive事件监听器
element.addEventListener('scroll', myEventHandler, { capture: false, passive: true });