passive事件始末

不知道从什么时候开始,在谷歌浏览器中,我们无法正常的从touchstart, touchemove等事件中调用preventDefault函数了。经过一段时间的资料查询,发现这一切都源于浏览器对scroll(滑动页面)的一个优化。

在浏览器中,为了让滑动滚动条能够在沉重js环境下顺畅运行,滚动屏幕是通过多线程来实现的。但这一个优化有可能会因为一系列的touchstart给毁掉。因为,任何touchstart中都有可能发生preventDefault函数的调用,而这个函数就会终止掉滚动屏幕的操作。这就会发生一个线程在运行过程中,不断的检测另外一个线程有没有发生某个事件。这毫无疑问是对性能的大打折扣。

为了更好的优化这个性能,谷歌浏览器给touchstart, touchmove, touchend等函数都默认为passive事件。除非你“显示”的通过addEventListener函数,给touchstart的回调定义为passive=false。例如:

dom.addEventListener('touchstart', onTouchStart, {passive: false})

通过以上方式绑定的onTouchStart函数中才可以调用event.preventDefault()

发表评论

邮箱地址不会被公开。 必填项已用*标注