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

  发布时间:2018-12-26 15:33:59   作者:faker   我要评论

这篇文章主要介绍了详解webapp页面滚动卡顿的解决办法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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

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

addEventListener的useCapture参数

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

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

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

<div id="level1">
  <div id="level2">
    <div id="level3">请在此点击</div>
  </div>
</div>
<div id="info">
</div>
var level1 = document.getElementById("level1");
var level2 = document.getElementById("level2");
var level3= document.getElementById("level3");
var info = document.getElementById("info");
outDiv.addEventListener("click", function () { info.innerHTML += "level1" + "<br>"; }, false);
middleDiv.addEventListener("click", function () { info.innerHTML += "level2" + "<br>"; }, false);
inDiv.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页面滚动卡顿的解决办法

    这篇文章主要介绍了详解webapp页面滚动卡顿的解决办法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-26
  • localStorage 设置过期时间的方法实现

    localStorage除非人为手动清除,否则会一直存放在浏览器中,但是很多情况下我们可能需要localStorage有一个过期时间,那么如何 设置localStorage过期时间,本文就来介绍一
    2018-12-21
  • Html5调用手机摄像头并实现人脸识别的实现

    这篇文章主要介绍了Html5调用手机摄像头并实现人脸识别的实现,混合App开发,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-12-21
  • HTML5的postMessage的使用手册

    HTML5提出了一个新的用来跨域传值的方法,即postMessage,这篇文章主要介绍了HTML5的postMessage的使用手册的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参
    2018-12-19
  • 使用html2canvas.js实现页面截图并显示或上传的示例代码

    这篇文章主要介绍了使用html2canvas.js实现页面截图并显示或上传的示例代码的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-18
  • Canvas globalCompositeOperation

    这篇文章主要介绍了Canvas globalCompositeOperation 的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-18
  • canvas实现俄罗斯方块的方法示例

    这篇文章主要介绍了canvas实现俄罗斯方块的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-13
  • 深入理解HTML5定时器requestAnimationFrame的使用

    计时器一直是javascript动画的核心技术。这篇文章主要介绍了深入理解HTML5定时器requestAnimationFrame的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起
    2018-12-12
  • 手对手的教你用canvas画一个简单的海报的方法示例

    企业的广告投入开始从电视等传统媒体向基于圈层文化的新媒体精准营销转移,很多人都想制作一张属于自己的海报,本文介绍了手对手的教你用canvas画一个简单的海报的方法示例
    2018-12-10
  • html5+css如何实现中间大两头小的轮播效果

    这篇文章主要介绍了html5+css如何实现中间大两头小的轮播效果的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-06

最新评论