Vue踩坑(二)[Violation] Added non-passive event listener

559 阅读2分钟

你的强迫症是否还在因为控制台警告而烦恼!!!

今天给大家带来关于已添加非被动事件监听器到阻塞滚动的事件的控制台警告

屏幕截图 2024-12-26 093833.png

翻译:

element-ui.common.js:10016 [Violation] 已添加非被动事件监听器到阻塞滚动的 'mousewheel' 事件。考虑将事件处理程序标记为 'passive',以提高页面的响应性。请参阅 https://www.chromestatus.com/feature/5745543795965952

popup-manager.js:27 [Violation] 已添加非被动事件监听器到阻塞滚动的 'touchmove' 事件。考虑将事件处理程序标记为 'passive',以提高页面的响应性。请参阅 https://www.chromestatus.com/feature/5745543795965952

EChart.vue:43 [Violation] 已添加非被动事件监听器到阻塞滚动的 'mousewheel' 事件。考虑将事件处理程序标记为 'passive',以提高页面的响应性。请参阅 https://www.chromestatus.com/feature/5745543795965952

原因:

自 Chrome 51 起,浏览器引入了一种新的事件捕获机制 —— Passive Event Listeners,用于提升页面性能。

什么是 Passive Event Listeners?

Passive Event Listeners 可以告知浏览器,事件监听器是否会调用 preventDefault() 方法来阻止事件的默认行为。通过这一机制,浏览器能够更好地优化页面性能,尤其是在处理滚动事件时。

当监听器的 passive 属性设置为 true 时,表示监听器不会调用 preventDefault() 阻止默认行为。浏览器因此可以直接响应滚动操作,而无需等待事件处理完成,进而提升流畅度。Chrome 将这种监听器称为被动监听器(Passive Listener)。

解决:

下载 default-passive-events

它是一个帮助优化事件监听性能的 JavaScript 库。它通过自动将默认的事件监听器(例如 touchstartwheel)设置为被动(passive),从而提升滚动性能并避免与浏览器的性能警告冲突。

npm i default-passive-events -S
//再在main.js导入
import 'default-passive-events'

引入后,它会自动为touchstart,touchmove,wheel,mousewheel事件添加默认的 passive: true 选项