考虑将事件处理程序标记为'passive'使页面响应更快
Consider marking event handler as 'passive' to make the page more responsive
我正在使用锤子拖动,当加载其他东西时,它会变得不稳定,因为这个警告信息告诉我。
处理'touchstart'输入事件延迟了X毫秒,原因是主线程繁忙。考虑将事件处理程序标记为"被动"让页面更有响应性
所以我试着给听者加上"被动",像这样
Hammer(element[0]).on("touchstart", function(ev) {
// stuff
}, {
passive: true
});
但是我仍然得到这个警告
对于那些第一次收到这个警告的人来说,这是由于最近(2016年夏天)在浏览器中实现了一个叫做被动事件侦听器的前沿特性。从https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md:
被动事件监听器是DOM规范中启用的新特性开发人员可以选择加入,通过消除滚动来获得更好的滚动性能需要滚动来阻止触摸和滚轮事件监听器。开发人员可以用{passive: true}注释触摸和滚轮侦听器。以表明它们永远不会调用preventDefault。这个特性在Chrome 51和Firefox 49中发布,并登陆WebKit。完整的官方解释在这里阅读更多。
参见:什么是被动事件侦听器?
你可能需要等待你的。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 - closed:https://github.com/noraesae/perfect-scrollbar/issues/560
- AngularJS -由于无法修复而关闭:https://github.com/angular/angular.js/issues/15901
下面的库解决了这个问题。
只需将此代码添加到您的项目中。
<script type="text/javascript" src="https://unpkg.com/default-passive-events"></script>
如果您需要更多信息,请访问库
隐藏警告信息:
jQuery.event.special.touchstart = {
setup: function( _, ns, handle ) {
this.addEventListener("touchstart", handle, { passive: !ns.includes("noPreventDefault") });
}
};
对于遗留问题,找到抛出错误的行并添加{passive: true}
-例如:
this.element.addEventListener(t, e, !1)
是
this.element.addEventListener(t, e, { passive: true} )
对于jquery-ui-dragable与jquery-ui-touch-punch我修复它类似Iván Rodríguez,但有一个事件覆盖touchmove:
jQuery.event.special.touchstart = {
setup: function( _, ns, handle ) {
this.addEventListener('touchstart', handle, { passive: !ns.includes('noPreventDefault') });
}
};
jQuery.event.special.touchmove = {
setup: function( _, ns, handle ) {
this.addEventListener('touchmove', handle, { passive: !ns.includes('noPreventDefault') });
}
};
如果没有指定passive
,则会发出警告。
要抑制此警告,您可以:
addEventListener('touchstart', this.callPassedFuntion, {
passive: false
})
浏览器默认监听preventDefault
。它会倾听,但它会让你知道:嘿,你可以在这里改进你的应用。如果不能,让我知道你不能(通过声明:passive: false
)。
我从被接受的答案的评论中创建了这个答案,对于任何试图找到这个答案的人来说,这可能更难找到。
我认为除了基于触摸的事件,你可以添加基于滚动的修复,以防止谷歌页面评分标记桌面和移动:
//被动事件监听器(设置标志的两个细微变化)
jQuery.event.special.touchstart = {
setup: function( _, ns, handle ) {
this.addEventListener("touchstart", handle, { passive: !ns.includes("noPreventDefault") });
}
};
jQuery.event.special.touchmove = {
setup: function( _, ns, handle ) {
this.addEventListener("touchmove", handle, { passive: !ns.includes("noPreventDefault") });
}
};
jQuery.event.special.wheel = {
setup: function( _, ns, handle ){
this.addEventListener("wheel", handle, { passive: true });
}
};
jQuery.event.special.mousewheel = {
setup: function( _, ns, handle ){
this.addEventListener("mousewheel", handle, { passive: true });
}
};
我找到了一个适用于jQuery 3.4.1 slim的解决方案
取消最小化后,将{passive: true}
添加到第1567行addEventListener函数中,如下所示:
t.addEventListener(p, a, {passive: true}))
没有任何问题,灯塔审计也不会抱怨监听者。
我也遇到过同样的问题。然后我用这个
<script type="text/javascript" src="https://unpkg.com/default-passive-events"></script>
希望你的问题能得到解决。
- 如何将getJson的响应保存在全局变量中
- 如何使用Spring MVC将Facebook返回的响应数据保存在Java类中
- 使用angularjs向浏览器发送servlet响应(下载功能)
- MockJax没有在JavaScript应用程序中发送对我AJAX请求的响应
- 不再使用innerHTML进行AJAX响应.(代码未得到响应)
- 为什么可以't我使用了AJAX响应的一部分
- 响应动画手风琴不工作
- 如何从SeleniumWebdriver获取异步Javascript响应
- Ajax调用在Firefox中不会自动响应
- 可以在响应时隐藏iphone上的“播放”按钮以进行视频播放
- 由于响应中不存在“Access Control Allow Origin”标头,跨域请求停止工作
- 如何在 JavaScript 和 HTML 中更改对输入框的提示响应
- IIS动态HTTP响应标头
- 预期响应包含一个对象,但在angular js中得到一个数组错误
- Ajax响应转换
- 使Intro.js工具提示响应
- 存储$http如何从$http函数(Angularjs)外部获取可访问变量中的响应
- 将高图饼图中的文本居中显示为响应
- Css转换没有响应
- 考虑将事件处理程序标记为'passive'使页面响应更快