移动端滑动出现卡顿怎么解决,浏览器滚动卡顿

　　当手机浏览器滚动当前页面(也可能是缩放页面)时，默认行为被阻止，导致页面被迫静止，导致用户体验不佳，滚动页面时有停顿的感觉。

　　具体解释：由于touchstart事件对象的cancelable属性为true，这意味着它的默认行为可以被监听器通过preventDefault()方法阻止。但是，浏览器无法提前知道某个监听器是否会调用preventDefault()。它所能做的就是等待监听器执行默认行为。但是监听器执行起来需要时间，有的甚至需要明显的时间，会导致页面卡顿。即使监听器是空函数，也会造成一些停滞。毕竟空函数的执行是需要时间的。

　　addEventListener的useCapture参数

　　基本概念：xxx.addEventListener(事件名，函数(xxx){xxx}，useCapture)。

　　第一个参数表示事件名称(不包括on，如‘click’)；第二个参数指示接收事件处理的函数；第三个参数是useCapture。

　　我们来看看这个东西是什么意思，直接的例子更直观。

　　div id= level 1 div id= level 2 div id= level 3 请单击此处/div/div/div id= info /div var level 1=document . getelementbyid( level 1 )；var level 2=document . getelementbyid( level 2 )；var level 3=document . getelementbyid( level 3 )；var info=document . getelementbyid( info )；outDiv.addEventListener(click ，function(){ info . innerhtml= level 1 br )；}，假)；middle div . addevent listener( click ，function(){ info . innerhtml= level 2 br )；}，假)；inDiv.addEventListener(click ，function(){ info . innerhtml= level 3 br )；}，假)；根据上面的代码，使用useCapture为true和false的效果如下：

　　当全部为假时，触发序列为级别3、级别2和级别1。

　　当全部为真时，触发序列为级别1、级别2和级别3。

　　当级别1为真，其他为假时，触发序列为级别1、级别3和级别2。

　　当level2为真，其他为假时，触发序列为level2、level3和level1。

　　当level3为真，其他为假时，触发序列为level3、level2和level1。

　　当level1为假且其他为真时，触发序列为level2、level3和level1。

　　当level2为假且其他为真时，触发序列为level1、level3和level2。

　　当level3为假且其他为真时，触发序列为level1、level2和level3。

　　从上述结果可以得出以下结论：

　　true的触发序列总是在false之前；

　　如果都为真，外层的触发先于内层的触发；

　　如果都为假，内层会在外层之前触发。

　　passive属性来控制事件行为

　　使用方式如下

　　addEventListener的三个属性( event name ，function (XXX) {XXX}，{capture: false，passive: false，once: false})都是布尔开关，默认值都是false。

　　Capture:相当于前面的useCapture参数；

　　Once:表示监听器是一次性的，执行一次后会被removeEventListener自动移除；

　　被动：webapp的触摸事件

　　据了解，手机浏览器使用事件时，80%的滚动事件监听器不会停止默认行为，也就是说大多数情况下，浏览器是白屏等等。于是，被动倾听者诞生了。被动是“听话”的意思，表示不会对事件的默认行为说不。当浏览器知道一个监听器是被动的，它可以在两个线程中同时执行监听器中的JavaScript代码和浏览器的默认行为。

　　这就是本文的全部内容。希望对大家的学习和支持有帮助。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。