首页 > 作文

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

更新时间:2023-04-03 03:48:41 阅读: 评论:0

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

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

addeventlistener的ucapture参数

基本概念:xxx.addeventlistener(‘事件名’, function(xxx){xxx}, ucapture).

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

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

<div id="level1">  <div id="level2">    <div id="level3">请在此点击</div>  </div></div><div id="info"></div>
var level1 = doc陈嘉庚的资料ument.getelementbyid("level1");var level2 = document.getelementbyid("level2");var level3= document.getelementbyid("level3");var info = document.ge11月21日是什么节日telementbyid("info");outdiv.addeventlistener("click", function () { info.innerhtml += "level1" + "<br>"; }, fal);middlediv.addeventlistener("click", function () { info.innerhtml += "level2" + "<br>"; }, fal);indiv.addeventlistener("click", function () { info.innerhtml += "level3" + "<br>"物理力学公式; }, fal);

根据上述代码来看这个 ucapture 为 true 和 fal的作用效果:

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

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

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

passive属性来控制事件行为

使用方式如下

addeventlistener('事件名', function(xxx){xxx}, {    capture: fal,    passive: fal,    once: fal})

三个属性都是布尔类型的开关,默认值都为 fal。

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

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

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

本文发布于:2023-04-03 03:48:39,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/618debfa74a411d00b26aca4ea793f86.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:详解webapp页面滚动卡顿的解决办法.doc

本文 PDF 下载地址:详解webapp页面滚动卡顿的解决办法.pdf

标签:监听器   顺序   事件   他为
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图