javascript - 考虑将事件处理程序标记为 'passive' 以使页面响应更快

Question

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

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.

所以我试着像这样给监听器添加'passive'

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

但我仍然收到此警告。

Answer 1

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

Passive event listeners are a new feature in the DOM spec that enabledevelopers to opt-in to better scroll performance by eliminating theneed 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 featureshipped in Chrome 51, Firefox 49 and landed in WebKit. For full official explanation read more here.

另请参阅:What are passive event listeners?

您可能需要等待 .js 库实现支持。

如果您通过 JavaScript 库间接处理事件，您可能会受制于该特定库对该功能的支持。截至 2019 年 12 月，似乎还没有任何主要图书馆实现支持。一些例子:

• jQuery.js - 持续问题:https://github.com/jquery/jquery/issues/2871
• React.js - 持续问题:https://github.com/facebook/react/issues/6436
  React 17 讨论:https://github.com/facebook/react/issues/19651
• 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