一、说明EventTarget.addEventListener()参数详解 ✨✨

addEventListener(type, listener);
addEventListener(type, listener, options);
addEventListener(type, listener, useCapture);

参数信息描述

• type 监听事件类型的大小写敏感的字符串

• listener 事件监听回调 函数

• options （object类型可选）

{
	capture:Boolean,
	once:Boolean,
	passive:Boolean
}

1. capture 表示 listener 会在该类型的事件捕获阶段传播到该 EventTarget 时触发
2. once 表示 listener 在添加之后最多只调用一次
3. passive 设置为 true 时，表示 listener 不会调用 preventDefault()。

• useCapture

1. 监听器在监听时有三个阶段：捕获阶段、目标阶段和冒泡阶段；
2. 默认false只在冒泡阶段触发，true只在捕获接口触发；

二、使用 passive 改善滚屏性能 ☘ ☘

将 passive 设为 true 可以启用性能优化，并可大幅改善应用性能 passive 设为 true,不会调用preventDefault，因preventDefault的调用导致浏览器必须等待监听函数执行完成，造成阻塞；

/* 检测当前浏览器是否支持passive该特性 */
let passiveIfSupported = false;

try {
  window.addEventListener("test", null,
    Object.defineProperty(
      {},
      "passive",
      {
        get() { passiveIfSupported = { passive: true }; }
      }
    )
  );
} catch (err) {}

window.addEventListener('scroll', (event) => {
  // 不要使用 event.preventDefault();
}, passiveIfSupported );

大部分最新浏览器（Safari 和 Internet Explorer 除外）将文档级节点 Window、Document 和 Document.body 上的 wheel、mousewheel、touchstart 和 touchmove 事件的 passive 默认值更改为 true。

三、全局依赖解决方案，在main函数引入调用 💐 💐

yarn add default-passive-events

// main 入口文件 引入执行；
require('default-passive-events');