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


Posted in HTML / CSS onDecember 26, 2018

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

具体一点的解释:由于 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 代码和浏览器的默认行为了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
css3和jquery实现自定义checkbox和radiobox组件
Apr 22 HTML / CSS
CSS3 Media Queries详细介绍和使用实例
May 08 HTML / CSS
CSS3实现千变万化的文字阴影text-shadow效果设计
Apr 26 HTML / CSS
css3针对移动端卡顿问题的解决(动画性能优化)
Feb 14 HTML / CSS
HTML5中的nav标签学习笔记
Jun 24 HTML / CSS
HTML5中语义化 b 和 i 标签
Oct 17 HTML / CSS
html5的canvas实现3d雪花飘舞效果
Dec 27 HTML / CSS
一些常用的HTML5模式(pattern) 总结
Jul 14 HTML / CSS
canvas环形倒计时组件的示例代码
Jun 14 HTML / CSS
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
Apr 27 HTML / CSS
前端使用canvas生成盲水印的加密解密的实现
Dec 16 HTML / CSS
HTML基本元素标签介绍
Feb 28 HTML / CSS
Html5调用手机摄像头并实现人脸识别的实现
Dec 21 #HTML / CSS
HTML5的postMessage的使用手册
Dec 19 #HTML / CSS
使用html2canvas.js实现页面截图并显示或上传的示例代码
Dec 18 #HTML / CSS
Canvas globalCompositeOperation
Dec 18 #HTML / CSS
深入理解HTML5定时器requestAnimationFrame的使用
Dec 12 #HTML / CSS
手对手的教你用canvas画一个简单的海报的方法示例
Dec 10 #HTML / CSS
html5+css如何实现中间大两头小的轮播效果
Dec 06 #HTML / CSS
You might like
深入PHP中慎用双等于(==)的详解
2013/06/06 PHP
discuz加密解密函数使用方法和中文注释
2014/01/21 PHP
wordpress安装过程中遇到中文乱码的处理方法
2015/04/21 PHP
yii2.0实现验证用户名与邮箱功能
2015/12/22 PHP
详解php中空字符串和0之间的关系
2016/10/23 PHP
php遍历替换目录下文件指定内容的方法
2016/11/10 PHP
详解php与ethereum客户端交互
2018/04/28 PHP
jQuery动画效果-slideUp slideDown上下滑动示例代码
2013/08/28 Javascript
Jquery 数组操作大全个人总结
2013/11/13 Javascript
JavaScript中双叹号(!!)作用示例介绍
2014/04/10 Javascript
js动态改变select选择变更option的index值示例
2014/07/10 Javascript
JS+CSS实现仿新浪微博搜索框的方法
2015/02/24 Javascript
JavaScript实现移动端滑动选择日期功能
2016/06/21 Javascript
js实现弹窗暗层效果
2017/01/16 Javascript
jQuery实现鼠标滑过预览图片大图效果的方法
2017/04/26 jQuery
详解Node.js 命令行程序开发教程
2017/06/07 Javascript
vue.js实现条件渲染的实例代码
2017/06/22 Javascript
react-native组件中NavigatorIOS和ListView结合使用的方法
2017/09/30 Javascript
layui实现动态和静态分页
2018/04/28 Javascript
js实现筛选功能
2020/11/24 Javascript
[42:32]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第二场 11.27
2020/12/01 DOTA
python用ConfigObj读写配置文件的实现代码
2013/03/04 Python
python中的__slots__使用示例
2015/02/26 Python
python 3.0 模拟用户登录功能并实现三次错误锁定
2017/11/01 Python
Python实现列表删除重复元素的三种常用方法分析
2017/11/24 Python
python-tkinter之按钮的使用,开关方法
2019/06/11 Python
Python closure闭包解释及其注意点详解
2019/08/28 Python
VSCode配合pipenv搞定虚拟环境的实现方法
2020/05/17 Python
Python爬虫获取页面所有URL链接过程详解
2020/06/04 Python
全球性的在线婚纱礼服工厂:27dress.com
2019/03/21 全球购物
Booking.com德国:预订最好的酒店和住宿
2020/02/16 全球购物
企业安全生产责任书
2014/04/14 职场文书
2014大学生批评与自我批评思想汇报
2014/09/21 职场文书
计算机实训报告总结
2014/11/05 职场文书
2015年大学生党员承诺书
2015/04/27 职场文书
初中英语教学随笔
2015/08/15 职场文书