好吧,让我走出这条路真的很快. 我 讨厌网站将轮事件(或touchstart和touchmove)附加到页面上. 绝对讨厌它们. 主要原因是结果的可怕性能,特别是在移动设备上。 您可以看到,浏览器必须等待重绘页面,直到事件聆听器完成执行,因为该事件可以被取消。 如果您的事件运行在每个滚动,然后滚动页面变得令人难以置信,特别是如果你不退出事件。
被动事件收听器允许您将不可取消的处理器附加到事件中,允许浏览器围绕您的事件收听器进行优化。
虽然它们是对规格的相对较新的补充,但它们已经得到大多数大玩家(https://caniuse.com/#feat=passive-event-listener)的支持(基本上除了IE、Edge和Opera Mini以外的每个人)。
此外,它们的使用方式是这样的,它们不会真正打破现有的行为. 如果您需要支持其他浏览器,您可以使用此 polyfill。
使用
使用被动事件,不幸的是,相当复杂。
假设你的原始代码是这样的东西:
1// Really, if you're using wheel, you should instead be using the 'scroll' event, as it's passive by default.
2document.addEventListener('wheel', (evt) => {
3 // ... do stuff with evt
4}, true)
你需要用这个替换它:
1document.addEventListener('wheel', (evt) => {
2 // ... do stuff with evt
3}, {
4 capture: true,
5 passive: true
6})
是的,我知道,几乎不可能把你的头包围。
让我试着解释一下。
因此,通常在记录滚动事件时,您会添加最后一个参数,即真,以表示您的事件应该在捕捉阶段运行(即从上到下,而不是从下到下)。
允许被动事件的新功能之一是 EventListenerOptions spec. 听起来很可怕,但它实际上只是可选地用具有少数属性的对象来替代捕捉布尔文,在这种情况下,我们可以将捕捉设置为真实,以获得与第一例相同的结果,然后将被动设置为真实,以使事件被动。
为了进一步提高性能,请确保您正在跳跃或退出您的活动。
使用
在移动设备上感知的性能罚款最大(说是快5倍)的事件是滚动,轮子,触摸启动和触摸移动。
所以,如果你在手机上处理这四个事件中的任何一个,扔进那个小小的聚合物并将{被动:真实 }添加到这些事件中就不会伤害。