移动端滚动体验提升:passive event

直接先贴一个链接有比较详细
移动端Web界面滚动性能优化: Passive event listeners

总结一下就是说

按照原来的事件函数顺序,浏览器不知道事件处理函数是否会调用preventDefault阻止默认行为,所以会在事件处理函数之后再进行默认行为。

那么,在滚动的时候,事件函数的效率可能过低,而等待这个函数完成再进行滚动的体验就会有卡顿的感觉,所以现在有了这么个选项:passive。如果值为true时,等于告诉浏览器,事件函数里没有preventDefault,浏览器就会正常的处理默认行为。

目前来看,在高版本的webkit内核浏览器里passive是默认为true的,所以想禁止滚动发现不生效的时候,你得把事件绑定添加这个选项了。

element.addEventListener('touchmove', handler, { passive: false })
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,108评论 25 709
  • 用两张图告诉你,为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料? 从这篇文章中你...
    hw1212阅读 13,085评论 2 59
  • 两个月 不能再久了 当初下了soul是想要改变自己过分注重外表的陋习 但是也掩饰不了我那不纯的动机 虽然我在尽力的...
    Mounty有梨涡阅读 990评论 2 1
  • 黄店长来探阅读 257评论 0 0
  • 8月28日回到了工作的地方,觉得自己已经满血复活的我,在开学不到一个月不是感冒就是胃疼,但还是坚持完成工...
    子不语0106阅读 371评论 1 2