app怎样像web一样调试(详解webapp页面滚动卡顿的解决办法)
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 代码和浏览器的默认行为了。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
- webapp前端能用yii2开发吗(Yii Framework框架使用PHPExcel组件的方法示例)
- app怎样像web一样调试(详解webapp页面滚动卡顿的解决办法)
- webapp隐藏地址栏
- 当年的 白洋淀战神 练肌肉 嘎子哥也成为行走的荷尔蒙(当年的白洋淀战神)
- 肌肉小子陈康, 亚洲巨兽 黄哲勋,哪个才是你的菜(肌肉小子陈康亚洲巨兽)
- 新闻周刊 青岛网红 赵厂长 编段子一箩筐输出快乐,陪父亲十二载勇斗病魔(新闻周刊青岛网红)
- 44岁夏雨演谋女郎爸,大其24岁却看不出,互动不怕袁泉吃醋(44岁夏雨演谋女郎爸)
- 全椒人,你还记得吗 那年,那人,那网,那些我们的青春记忆(全椒人你还记得吗)
- 全椒人在苏州10周年联谊会在苏州举办(全椒人在苏州10周年联谊会在苏州举办)
热门推荐
- docker 重置容器的映射端口(运行中的docker容器端口映射如何修改详解)
- python实现简单加密(Python 隐藏输入密码时屏幕回显的实例)
- sql中trim函数用法(SQL中Truncate的用法)
- sqlserver中复合索引(浅析SQL Server 聚焦索引对非聚集索引的影响)
- php在if里添加xml代码(PHP创建XML接口示例)
- apache漏洞怎么排查(apache urlrewrite防盗链功能配置)
- mvc中Scripts.Render、Styles.Render
- SQL SERVER中调用存储过程
- 微信小程序接口返回数据怎么弄(微信小程序页面返回传值的4种解决方案汇总)
- sw动态注解视图干嘛的(Swoole 5将移除自动添加Event::wait特性详解)