vue项目中报警告Added non-passive event listener to a scroll-blocking <some> event. Consider marking event handler as 'passive' to make the page more responsive. See
是什么意思,如何解决
原因:
这个警告是因为在监听滚动事件时,没有指定事件处理程序为被动的(passive),可能会导致页面滚动时出现性能问题。解决这个问题的方法是在添加事件监听时指定事件处理程序为被动的。
解法方案:
从源头讲在添加事件监听的地方,为事件处理程序加上一个对象,包含passive: true的属性,表示这个事件处理程序是被动的。
大致的意思如下:
示例代码:
windows.addEventListener('scroll', function() {
// 事件处理程序代码
}, { passive: true });
通过这种方式,可以将事件处理程序标记为被动的,解决警告问题,提高页面的性能响应。
方案1:
在main.js中,vue初始化之前,最好在开头加上一下代码:
(function () {
if (typeof EventTarget !== "undefined") {
let func = EventTarget.prototype.addEventListener;
EventTarget.prototype.addEventListener = function (type, fn, capture) {
this.func = func;
if (typeof capture !== "boolean") {
capture = capture || {};
capture.passive = false;
}
this.func(type, fn, capture);
};
};
}());
这段代码是一个自执行匿名函数,用于修改 EventTarget
的 addEventListener
方法。具体来说,它的作用是确保所有添加的事件监听器的 passive
选项被设置为 false
。以下是代码的详细解释:
-
自执行匿名函数:
(function () { // 函数体 }());
这个函数在定义后立即执行,确保其内部的代码在脚本加载时立即运行。
-
检查
EventTarget
是否存在:if (typeof EventTarget !== "undefined") {
这行代码检查
EventTarget
是否在当前环境中定义。EventTarget
是一个接口,所有可以接收事件的对象(如Element
、Document
等)都实现了这个接口。 -
保存原始的
addEventListener
方法:let func = EventTarget.prototype.addEventListener;
这行代码将
EventTarget
原始的addEventListener
方法保存到func
变量中,以便稍后调用。 -
重写
addEventListener
方法:EventTarget.prototype.addEventListener = function (type, fn, capture) { this.func = func; if (typeof capture !== "boolean") { capture = capture || {}; capture.passive = false; } this.func(type, fn, capture); };
这段代码重写了
EventTarget
的addEventListener
方法。新的方法会:- 将原始的
addEventListener
方法赋值给this.func
。 - 检查
capture
参数是否为布尔值。如果不是,则将其设置为一个对象,并将passive
选项设置为false
。 - 调用原始的
addEventListener
方法,并传递修改后的参数。
- 将原始的
作用
这段代码的主要作用是确保所有通过 addEventListener
添加的事件监听器的 passive
选项被设置为 false
。passive
选项用于指示事件监听器不会调用 preventDefault
方法。如果设置为 true
,浏览器可以优化滚动性能,因为它不需要等待事件监听器的执行结果。
通过将 passive
选项强制设置为 false
,这段代码确保了所有事件监听器都可以调用 preventDefault
方法,从而防止默认行为(如滚动)发生。这在某些情况下可能是必要的,例如需要阻止触摸事件的默认滚动行为。
方案2:使用default-passive-events 开源库优化滚动性能
default-passive-events
是一个开源库,用于自动将所有的事件监听器设置为被动模式(passive mode)。被动模式的事件监听器可以提升滚动性能,因为它们不会阻止浏览器在事件触发时进行默认的滚动行为。
使用步骤
-
安装库:
使用 npm 或 yarn 安装default-passive-events
。npm install default-passive-events
或者
yarn add default-passive-events
-
在项目中引入并初始化:
在项目的入口文件(例如main.js
或index.js
)中引入并初始化default-passive-events
。import 'default-passive-events';
示例
假设你有一个 Vue.js 项目,你可以在 main.js
中引入 default-passive-events
:
// main.js
import { createApp } from 'vue';
import App from './App.vue';
import 'default-passive-events'; // 引入 default-passive-events
const app = createApp(App);
// 其他初始化代码
app.mount('#app');
这样,所有的事件监听器将默认设置为被动模式,从而提升滚动性能。