Added non-passive event listener to a scroll-blocking ＜some＞ event. Consider marking event handler a

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。以下是代码的详细解释：

1. 自执行匿名函数：

   (function () {
       // 函数体
   }());
   

   这个函数在定义后立即执行，确保其内部的代码在脚本加载时立即运行。

2. 检查 EventTarget 是否存在：

   if (typeof EventTarget !== "undefined") {
   

   这行代码检查 EventTarget 是否在当前环境中定义。EventTarget 是一个接口，所有可以接收事件的对象（如 Element、Document 等）都实现了这个接口。

3. 保存原始的 addEventListener 方法：

   let func = EventTarget.prototype.addEventListener;
   

   这行代码将 EventTarget 原始的 addEventListener 方法保存到 func 变量中，以便稍后调用。

4. 重写 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）。被动模式的事件监听器可以提升滚动性能，因为它们不会阻止浏览器在事件触发时进行默认的滚动行为。

使用步骤

1. 安装库：
   使用 npm 或 yarn 安装 default-passive-events。

   npm install default-passive-events
   

   或者

   yarn add default-passive-events
   

2. 在项目中引入并初始化：
   在项目的入口文件（例如 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');

这样，所有的事件监听器将默认设置为被动模式，从而提升滚动性能。