您的位置:首页 > Web前端 > > 正文

app怎样像web一样调试(详解webapp页面滚动卡顿的解决办法)

更多 时间:2021-10-03 01:40:54 类别:Web前端 浏览量:710

app怎样像web一样调试

详解webapp页面滚动卡顿的解决办法

手机浏览器在滚动当前页面(还可能是缩放页面)时,由于默认行为被阻止,导致页面被迫静止,导致用户使用体验差,感觉滚动页面有停顿感。

具体一点的解释:由于 touchstart 事件对象的 cancelable 属性为 true,也就是说它的默认行为可以被监听器通过 preventDefault() 方法阻止。但浏览器无法预先知道一个监听器会不会调用 preventDefault(),它能做的只有等监听器执行完后再去执行默认行为,而监听器执行是要耗时的,有些甚至耗时很明显,这样就会导致页面卡顿。即便监听器是个空函数,也会产生一定的卡顿,毕竟空函数的执行也会耗时。

addEventListener的useCapture参数

基本概念:xxx.addEventListener('事件名', function(xxx){xxx}, useCapture).

第一个参数表示事件名称(不含 on,如 "click");第二个参数表示要接收事件处理的函数;第三个参数为 useCapture.

下面就来看看这个东西是个啥意思,直接举例子说明更加直观。

  • <li id="level1">
      <li id="level2">
        <li id="level3">请在此点击</li>
      </li>
    </li>
    <li id="info">
    </li>
    
    
  • var level1 = document.getElementById("level1");
    var level2 = document.getElementById("level2");
    var level3= document.getElementById("level3");
    var info = document.getElementById("info");
    outli.addEventListener("click", function () { info.innerHTML += "level1" + "<br>"; }, false);
    middleli.addEventListener("click", function () { info.innerHTML += "level2" + "<br>"; }, false);
    inli.addEventListener("click", function () { info.innerHTML += "level3" + "<br>"; }, false);
    
  • 根据上述代码来看这个 useCapture 为 true 和 false的作用效果:

    全为 false 时,触发顺序为:level3、level2、level1
    全为 true 时,触发顺序为:level1、level2、level3
    level1为 true,其他为 false 时,触发顺序为:level1、level3、level2
    level2为 true,其他为 false 时,触发顺序为:level2、level3、level1
    level3为 true,其他为 false 时,触发顺序为:level3、level2、level1
    level1为 false,其他为 true时,触发顺序为:level2、level3、level1
    level2为 false,其他为 true时,触发顺序为:level1、level3、level2
    level3为 false,其他为 true时,触发顺序为:level1、level2、level3

    由上述结果得出如下结论:

    true 的触发顺序总是在 false 之前;
    如果多个均为 true,则外层的触发先于内层;
    如果多个均为 false,则内层的触发先于外层。

    passive属性来控制事件行为

    使用方式如下

  • addEventListener('事件名', function(xxx){xxx}, {
        capture: false,
        passive: false,
        once: false
    })
    
  • 三个属性都是布尔类型的开关,默认值都为 false。

    capture:等价于以前的 useCapture 参数;
    once:就是表明该监听器是一次性的,执行一次后就被自动 removeEventListener 掉;
    passive:用于webapp的touch事件

    据了解,在手机浏览器使用事件的时候,有 80% 的滚动事件监听器是不会阻止默认行为的,也就是说大部分情况下,浏览器是白等了。所以,passive 监听器诞生了,passive 的意思是“顺从的”,表示它不会对事件的默认行为说 no,浏览器知道了一个监听器是 passive 的,它就可以在两个线程里同时执行监听器中的 JavaScript 代码和浏览器的默认行为了。

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。