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

问题描述

我正在使用锤子进行拖动，并且在加载其他东西时它会变得不稳定，正如此警告消息告诉我的那样。

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

处理由于
主线程忙，'touchstart'输入事件被延迟了X ms。考虑将事件处理程序标记为'被动'到
使页面更具响应性。

Handling of 'touchstart' input event was delayed for X ms due to main thread being busy. 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
});

但我仍然收到此警告。

推荐答案

对于那些第一次收到此警告的人来说，这是由于最近在浏览器中实现了一个名为被动事件监听器的前沿功能（2016年夏季）。来自 https://github.com/WICG/EventListenerOptions/blob/gh- pages / explainer.md ：

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). From https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md:

被动事件监听器是DOM规范中的新功能这使得
开发人员可以通过消除滚动阻止触摸和滚轮事件监听器的
需要来选择加入更好的滚动性能。
开发人员可以使用{passive：true}
来注释触摸和轮式侦听器，以表明它们永远不会调用preventDefault。这个功能
在Chrome 51，Firefox 49中提供并登陆WebKit。 如需完整的官方解释，请在此处阅读更多内容。

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. Developers can annotate touch and wheel listeners with {passive: true} to indicate that they will never invoke preventDefault. This feature shipped in Chrome 51, Firefox 49 and landed in WebKit. For full official explanation read more here.

另见：什么被动事件监听器？

如果您通过JavaScript库间接处理事件，您可能会受到该特定库对该功能的支持。截至2016年8月，它似乎没有任何主要图书馆实施支持。一些例子：

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. As of August 2016, it does not look like any of the major libraries have implemented support. Some examples:

• jQuery.js - 正在进行的问题： https://github.com/jquery/jquery/issues/2871


• React .js - 正在进行的问题： https://github.com/facebook/react/issues / 6436


• Hammer.js - 正在进行的问题： https://github.com/hammerjs/hammer.js/pull/987


• perfect-scrollbar - 正在进行的问题：
  https://github.com/noraesae/perfect -scrollbar / issues / 560


• AngularJS - 正在进行的问题： https://github.com/angular/angular.js/issues/15901

• jQuery.js - ongoing issue: https://github.com/jquery/jquery/issues/2871
• React.js - ongoing issue: https://github.com/facebook/react/issues/6436
• Hammer.js - ongoing issue: https://github.com/hammerjs/hammer.js/pull/987
• perfect-scrollbar - ongoing issue: https://github.com/noraesae/perfect-scrollbar/issues/560
• AngularJS - ongoing issue: https://github.com/angular/angular.js/issues/15901

这篇关于考虑将事件处理程序标记为“被动”以使页面更具响应性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！