扣丁学堂HTML5培训之详解webapp页面滚动卡顿的解决办法

2019-02-13 14:13:32 547浏览

今天扣丁学堂HTML5培训老师给大家详细介绍一下关于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代码和浏览器的默认行为了。

以上就是关于扣丁学堂HTML5培训之详解webapp页面滚动卡顿的解决办法的全部内容，希望对大家的学习有所帮助，最后扣丁学堂html5培训官网、微信等平台，扣丁学堂IT职业在线学习教育平台为您提供权威的html5视频教程供学员学习，扣丁学堂老师精心推出的html5视频直播课定能让你快速掌握html5从入门到精通开发实战技能。扣丁学堂H5技术交流群：673883249。

【关注微信公众号获取更多学习资料】

查看更多关于“HTML5开发技术资讯”的相关文章>>