javascript - 考虑将事件处理程序标记为“被动”以使页面更具响应性(Consider marking event handler as 'passive' to make the page more responsive)

Question

I am using hammer for dragging and it is getting choppy when loading other stuff, as this warning message is telling me.

(我正在使用锤子进行拖动，在加载其他东西时它变得不稳，因为此警告消息告诉我。)

Handling of 'touchstart' input event was delayed for X ms due to main thread being busy.

(由于主线程繁忙，“ touchstart”输入事件的处理延迟了X ms。)

Consider marking event handler as 'passive' to make the page more responsive.

(考虑将事件处理程序标记为“被动”，以使页面更具响应性。)

So I tried to add 'passive' to the listener like so

(所以我试图像这样向听众添加“被动”)

Hammer(element[0]).on("touchstart", function(ev) {
  // stuff
}, {
  passive: true
});

but I'm still getting this warning.

(但我仍然收到此警告。)

  ask by Matt translate from so

Answer 1

For those receiving this warning for the first time, it is due to a bleeding edge feature called Passive Event Listeners that has been implemented in browsers fairly recently (summer 2016).

(对于那些首次收到此警告的用户，这是由于最近才在浏览器中实现了称为“ 被动事件侦听器”的最新功能（2016年夏季）。)

From https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md :

(从https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md ：)

Passive event listeners are a new feature in the DOM spec that enable developers to opt-in to better scroll performance by eliminating the need for scrolling to block on touch and wheel event listeners.

(被动事件侦听器是DOM规范中的一项新功能，使开发人员可以选择消除滚动而阻塞触摸和滚轮事件侦听器，从而选择更好的滚动性能。)

Developers can annotate touch and wheel listeners with {passive: true} to indicate that they will never invoke preventDefault.

(开发人员可以使用{passive：true}注释触摸和滚轮侦听器，以表示他们将永远不会调用preventDefault。)

This feature shipped in Chrome 51, Firefox 49 and landed in WebKit.

(该功能已在Chrome 51，Firefox 49和WebKit中提供。)

For full official explanation read more here.

(有关完整的官方说明，请在此处了解更多信息。)

See also: What are passive event listeners?

(另请参阅： 什么是被动事件侦听器？)

You may have to wait for your .js library to implement support.(您可能需要等待.js库实现支持。)

If you are handling events indirectly via a JavaScript library, you may be at the mercy of that particular library's support for the feature.

(如果通过JavaScript库间接处理事件，则可能会受该特定库对功能的支持的支配。)

As of August 2016, it does not look like any of the major libraries have implemented support.

(截至2016年8月，似乎没有任何主要图书馆实现了支持。)

Some examples:

(一些例子：)

• jQuery.js - ongoing issue: https://github.com/jquery/jquery/issues/2871

  (jQuery.js-持续存在的问题： https : //github.com/jquery/jquery/issues/2871)

• React.js - ongoing issue: https://github.com/facebook/react/issues/6436

  (React.js-持续存在的问题： https : //github.com/facebook/react/issues/6436)

• Hammer.js - ongoing issue: https://github.com/hammerjs/hammer.js/pull/987

  (Hammer.js-持续存在的问题： https : //github.com/hammerjs/hammer.js/pull/987)

• perfect-scrollbar - ongoing issue: https://github.com/noraesae/perfect-scrollbar/issues/560

  (perfect-scrollbar-持续存在的问题： https ： //github.com/noraesae/perfect-scrollbar/issues/560)

• AngularJS - ongoing issue: https://github.com/angular/angular.js/issues/15901

  (AngularJS-持续存在的问题： https : //github.com/angular/angular.js/issues/15901)