当前位置: 首页 > Web前端 > HTML5

webapp页面滚动卡顿的解决方法

时间:2023-04-05 17:08:00 HTML5

手机浏览器滚动当前页面(或放大缩小)时,默认行为被屏蔽,导致页面静止,导致用户体验差,感觉页面滚动有顿顿的感觉。具体解释:由于touchstart事件对象的cancelable属性为true,也就是说它的默认行为可以通过preventDefault()方法被监听者阻止。但是浏览器无法事先知道一个监听器是否会调用preventDefault(),它只能等待监听器执行完再执行默认行为,而监听器的执行是耗时的,有的甚至是耗时,这将导致页面冻结。即使监听器是一个空函数,也会有一些卡顿,毕竟空函数的执行也是需要时间的。addEventListener的useCapture参数的基本概念:xxx.addEventListener('事件名称',function(xxx){xxx},useCapture)。第一个参数表示事件名称(不包括on,如“点击”);第二个参数表示接收事件处理的函数;第三个参数是useCapture。我们先看看这个东西是什么意思,直接举个例子更直观。点击这里

varlevel1=document.getElementById("level1");varlevel2=document.getElementById("level2");varlevel3=document.getElementById("level3");varinfo=document.getElementById("信息");outDiv.addEventListener("click",function(){info.innerHTML+="level1"+"
";},false);middleDiv.addEventListener("click",function(){info.innerHTML+="level2"+"
";},false);inDiv.addEventListener("click",function(){info.innerHTML+="level3"+"
";},false);根据上面的代码来看这个useCapture为true和false的效果:当全部为false时,触发顺序为:level3,level2,level1全部为true,触发顺序为:level1,level2,level3level1为true,当其他为假时,触发顺序为当level1、level3、level2为真,其他为假时,触发顺序为:level2、level3、level1为真,当其他为假时,触发顺序为:level3、level2、level1为false,当other为true时,触发顺序为:level2,level3,level1level2为假,其他为真,触发顺序为:level1,level3,level2level3为假,其他为真,触发顺序为:level1,level2,level3从以上结果可以得出以下结论:触发顺序true总是false之前;multiple为真时,外层先于内层触发;如果multiple为false,则内层的触发优先于外层被动属性来控制事件行为。使用方法如下addEventListener('事件名称',function(xxx){xxx},{capture:false,passive:false,once:false})三个属性为布尔开关,默认值为false。capture:相当于前面的useCapture参数;once:表示监听器是一次性的,执行一次后会被re??moveEventListener自动移除;passive:用于webapp的touch事件据了解,在手机浏览器中使用事件时,80%的scroll事件监听器不会阻止默认行为,这意味着在大多数情况下,浏览器是在等待什么。于是,被动倾听者诞生了。Passive是“顺从”的意思,意思是不会对事件的默认行为说不。浏览器知道一个监听器是被动的,它可以同时在两个线程中执行监听器中的JavaScript代码和浏览器的默认行为都没有了。