Added non-passive event listener to ascroll- blocking ‘mousewheel‘event Consider marking event handl

[Violation ] Added non-passive event listener to ascroll- blocking 'mousewheel’event Consider marking event handler as ’ passive’to make the page more responsive. See https: com/feature/574554 3795965952

翻译：

[冲突]在ascroll中添加了非被动事件侦听器-阻塞“mousewheel”事件考虑将事件处理程序标记为“passive”，以使页面更具响应性。参见https:com/feature/574554 3795965952

解决办法：

npm i default-passive-events -S
main.js import 'default-passive-events'

拓展分析：

被动事件监听器

被动事件侦听器是DOM规范中的一项新功能，使开发人员可以选择消除滚动和阻塞事件监听器而无需滚动来选择更好的滚动性能。开发人员可以使用来注释触摸和滚轮侦听器，{passive: true}以表示它们将永远不会调用preventDefault。此功能在Chrome 51，Firefox 49和WebKit中都有提供。观看下面的视频，了解正在运行的被动事件侦听器的并排：

问题

流畅的滚动性能对于网络上的良好体验至关重要，尤其是在基于触摸的设备上。所有现代浏览器具有螺纹滚动功能，允许滚动时昂贵的JavaScript运行平稳甚至可以运行，但是这种优化的一部分由需要等待的任何结果大败touchstart和touchmove处理程序，这可能会阻止滚动完全由调用preventDefault()上事件。尽管在某些特定情况下作者可能确实希望阻止滚动，但分析表明，网络上的大多数触摸事件处理程序从未真正调用过preventDefault()，因此浏览器经常会不必要地阻止滚动。例如，在Android版Chrome浏览器中，有80％的阻止滚动的触摸事件从未真正阻止过滚动。这些事件中的10％给滚动开始增加了超过100ms的延迟，在1％的滚动中发生了至少500ms的灾难性延迟。

许多开发人员惊讶地发现，仅向其文档添加空的触摸处理程序会对滚动性能产生重大的负面影响。开发人员非常合理地期望观察事件的行为不会有任何副作用。

这里的基本问题不仅限于触摸事件。wheel事件 遭受相同的问题。相反，指针事件处理程序的设计宗旨是永不延迟滚动（尽管开发人员可以通过touch-actionCSS属性声明性地完全取消滚动），因此不要遭受此问题的困扰。本质上，被动事件侦听器建议将指针事件的性能属性引入触摸和滚轮事件。

该提议为作者提供了一种在处理程序注册时指示处理程序是否可以调用preventDefault()该事件（即，是否需要可取消的事件）的方式。当特定点上没有触摸或滚轮处理程序需要取消事件时，用户代理可以自由地立即开始滚动，而无需等待JavaScript。也就是说，被动监听器没有令人惊讶的性能副作用。

EventListenerOptions

首先，我们需要一种将附加信息附加到事件侦听器的机制。今天，captureto的参数addEventListener是类似这样的最接近的示例，但是它的用法非常不透明：

 document.addEventListener('touchstart', handler, true);

EventListenerOptions 让我们将其更明确地写为：

document.addEventListener('touchstart', handler, true);

这只是现有行为的新（可扩展）语法-指定是要在捕获阶段还是冒泡阶段调用侦听器。

解决方案：“被动”选项

现在，我们有了在事件处理程序注册时用于指定选项的可扩展语法，我们可以添加一个新passive选项，该选项预先声明侦听器永远不会preventDefault()在事件上调用。如果是这样，则用户代理将忽略该请求（理想情况下至少生成一个控制台警告），就像它对的事件一样Event.cancelable=false。开发人员可以通过Event.defaultPrevented在调用之前和之后进行查询来验证这一点preventDefault()。例如：

  addEventListener(document, "touchstart", function(e) {
    console.log(e.defaultPrevented);  // will be false
    e.preventDefault();   // does nothing since the listener is passive
    console.log(e.defaultPrevented);  // still false
  }, Modernizr.passiveeventlisteners ? {passive: true} : false);

现在，浏览器不再需要在有任何触摸或滚轮侦听器时阻止滚动，而仅在存在非被动侦听器时才需要这样做（请参见TouchEvents spec）。 passive侦听器没有性能方面的副作用。

通过将触摸或滚轮侦听器标记为passive，开发人员保证处理程序不会调用preventDefault以禁用滚动。 这样可以释放浏览器，使其立即响应滚动，而无需等待JavaScript，从而确保为用户提供可靠的平滑滚动体验。

特征检测

由于较早的浏览器会将第3个参数中的任何对象解释为该参数的true值capture，因此对于开发人员而言，在使用此API时使用功能检测或polyfill至关重要，以避免意外的结果。特定选项的功能检测可以如下进行：

// Test via a getter in the options object to see if the passive property is accessed
var supportsPassive = false;
try {
  var opts = Object.defineProperty({}, 'passive', {
    get: function() {
      supportsPassive = true;
    }
  });
  window.addEventListener("testPassive", null, opts);
  window.removeEventListener("testPassive", null, opts);
} catch (e) {}

// Use our detect's results. passive applied if supported, capture will be false either way.
elem.addEventListener('touchstart', fn, supportsPassive ? { passive: true } : false); 

为了简化此过程，您可以使用“检测它”中的功能检测，例如：

  elem.addEventListener('touchstart', fn,
    detectIt.passiveEvents ? {passive:true} : false);

Modernizr在这里也有检测。关于为字典成员特征检测提供更简单的API，存在着开放标准的争论。

无需取消事件

在某些情况下，作者可能有意通过取消所有触摸或滚轮事件来始终禁用滚动。这些包括：

平移和缩放地图

全页/全屏游戏
在这些情况下，当前行为（可以防止滚动优化）非常合适，因为始终可以防止滚动本身。在这些情况下，无需使用被动侦听器，尽管应用touch-action: noneCSS规则来明确您的意图通常仍然是一个好主意（例如，使用Pointer Events而不是Touch Events支持浏览器）。
但是，在许多常见情况下，事件不需要阻止滚动-例如：
仅监视用户上次活动时间的用户活动监视
touchstart 隐藏一些活动UI的处理程序（如工具提示）
touchstart和为touchendUI元素设置样式的处理程序（不抑制click事件）。
对于这些情况，passive可以添加该选项（具有适当的功能检测），而无需任何其他代码更改，从而显着提高了滚动体验。

在一些更复杂的场景中，处理程序仅希望在某些条件下抑制滚动，例如：

水平滑动以旋转转盘，松开物件或露出抽屉，同时仍允许垂直滚动。
在这种情况下，请使用touch-action：pan-y声明性地禁用沿水平轴开始的滚动，而无需调用preventDefault()（测试页）。
为了继续在所有浏览器中正常工作，对的调用preventDefault应以对touch-action所使用的特定规则缺乏支持为条件（请注意Safari 9当前仅支持touch-action: manipulation）。
一个UI元素（如YouTube的音量滑块），可在水平轮事件上滑动而不会更改垂直轮事件上的滚动行为。由于轮事件没有等效的“触摸动作”，因此这种情况只能用非被动的轮侦听器来实现。
事件委托模式将添加侦听器的代码不知道使用者是否取消事件。
这里的一种选择是分别为被动和非被动侦听器进行委派（就像它们完全是不同的事件类型一样）。
也可以touch-action像上面一样利用（处理Point Events的Touch Events）。

调试和衡量收益

您可以通过chrome：// flags /＃passive-listener-default（Chrome 52中的新增功能）将触摸/滚轮监听器强制为被动，从而快速了解可能带来的好处（以及潜在的损坏）。

Chrome小组正在为PerformanceTimeline API和更多DevTools功能制定提案，以帮助网络开发人员今天更好地了解此问题。

减少和分解长期运行的JS仍然很关键

当页面表现出明显的滚动空白时，始终表示某个地方存在潜在的性能问题。被动事件侦听器无法解决这些潜在问题，因此我们仍强烈建议开发人员确保其应用程序符合RAIL准则即使在低端设备上。如果您的网站一次运行的逻辑时间大于100毫秒，则响应点击/点击仍然会反应迟钝。被动事件侦听器仅允许开发人员将在滚动性能中反映出JS响应性的问题与监视输入事件的需求分离开。特别是，第三方分析库的开发人员现在可以放心，他们使用轻量级事件侦听器不会从根本上改变使用其代码的任何页面的观察到的性能特征。