移动端滑动性能优化preventDefault

2019-12-22 12:34:28

阅读:284
分类:代码段
标签:js

移动端滑动性能优化preventDefault

  1. 背景介绍
```
  很久以前 addEventListener(type, listener, useCapture)是这样的;
  后来 addEventListener(type, listener[, useCapture ])变成这样 第三个参数变成了可选参数 默认false

  现在 addEventListener(type, listener[, useCapture ])
      addEventListener(type, listener[, options ])
  也就是说第三个参数现在可以是两种类型的值了
  options 有三个可选参数 默认都为false
  addEventListener(type, listener, {
    capture: false, //是否在事件捕获阶段执行
    once: false, // 事件只执行一次
    passive: false // 是否顺从浏览器默认操作
  })

```
  1. 移动端touch事件

当你监听touchstart事件时候,浏览器不知道这里会不会有e.preventDefault() 故会执行期间增加判断,可能导致页面卡顿,通过passive提前通知浏览器(80%的页面是不需要阻止的)

  div.addEventListener("touchstart", function(e){
      ... // 浏览器不知道这里会不会有 e.preventDefault()增加判断
  })
  // 提前告诉浏览器 不会执行e.preventDefault()
  div.addEventListener("touchstart", function(e){ ... }, {passive: true})
  1. 注意

当你给passive: true标识时 再执行 e.preventDefault() 是无效的

评论:

    X

    备案号 皖ICP备19021899号-1  技术支持 © 947968273@qq.com