考虑将事件处理程序标记为“被动”,以使页面更具响应性
我正在使用锤子进行拖动,并且在加载其他内容时会变得不稳定,正如此警告消息告诉我的那样。
由于主线程繁忙,处理“touchstart”input事件被延迟了Xms。 考虑将事件处理程序标记为“被动”,以使页面更具响应性。
所以我试图像这样向听众添加“被动”
Hammer(element[0]).on("touchstart", function(ev) { // stuff }, { passive: true });
但我仍然得到这个警告。
对于第一次接受这个警告的人来说,这是由于被称为被动事件监听器的一个尖端function,最近已经在浏览器中实现(2016年夏季)。 从https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md :
被动事件监听器是DOM规范中的一项新function,它使开发人员无需滚动即可阻止触摸和轮询事件侦听器,从而使开发人员可以select更好的滚动性能。 开发人员可以使用{passive:true}来注释触摸和滚轮侦听器,以指示他们将永远不会调用preventDefault。 此function在Chrome 51,Firefox 49中发布,并已login到WebKit。 完整的官方解释请阅读更多。
另请参阅: 什么是被动事件侦听器?
您可能需要等待.js库实现支持。
如果您通过JavaScript库间接处理事件,则可能受到特定库对该function的支持。 截至2016年8月,似乎任何主要图书馆都没有实施支持。 一些例子:
- 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
- 完美滚动条 – 正在进行的问题: https : //github.com/noraesae/perfect-scrollbar/issues/560
- AngularJS – 正在进行的问题: https : //github.com/angular/angular.js/issues/15901