详解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字体效果的设置方法小结
Jun 13 HTML / CSS
基于css3仿造window7的开始菜单
Jun 17 HTML / CSS
CSS3实现的文本3D效果附图
Sep 03 HTML / CSS
纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
Apr 24 HTML / CSS
CSS3 RGBA色彩模式使用实例讲解
Apr 26 HTML / CSS
详解利用css3的var()实现运行时改变scss的变量值
Mar 02 HTML / CSS
微信浏览器左上角返回按钮拦截功能
Nov 21 HTML / CSS
html5 初试 indexedDB(推荐)
Jul 21 HTML / CSS
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
Mar 21 HTML / CSS
html5写一个BUI折叠菜单插件的实现方法
Sep 11 HTML / CSS
详解如何将 Canvas 绘制过程转为视频
Jan 25 HTML / CSS
使用canvas实现雪花飘动效果的示例代码
Mar 30 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
一个很方便的 XML 类!!原创的噢
2006/10/09 PHP
PHP设置进度条的方法
2015/07/08 PHP
phpstudy后门rce批量利用脚本的实现
2019/12/12 PHP
php的RSA加密解密算法原理与用法分析
2020/01/23 PHP
鼠标滚轮改变图片大小的示例代码
2013/11/20 Javascript
javascript中call apply 的应用场景
2015/04/16 Javascript
jQuery 弹出层插件(推荐)
2016/05/24 Javascript
Angular2内置指令NgFor和NgIf详解
2016/08/03 Javascript
jquery属性,遍历,HTML操作方法详解
2016/09/17 Javascript
JQuery Ajax 异步操作之动态添加节点功能
2017/05/24 jQuery
Vue.js列表渲染绑定jQuery插件的正确姿势
2017/06/29 jQuery
浅析Vue.js中v-bind v-model的使用和区别
2018/12/04 Javascript
ES6中的迭代器、Generator函数及Generator函数的异步操作方法
2019/05/12 Javascript
bootstrap Table实现合并相同行
2019/07/19 Javascript
VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)
2020/04/03 Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
2020/07/20 Javascript
Python实现向QQ群成员自动发邮件的方法
2014/11/19 Python
简单说明Python中的装饰器的用法
2015/04/24 Python
Python正则表达式教程之一:基础篇
2017/03/02 Python
Python搭建FTP服务器的方法示例
2018/01/19 Python
python3+PyQt5+Qt Designer实现堆叠窗口部件
2018/04/20 Python
django的model操作汇整详解
2019/07/26 Python
Python进度条的制作代码实例
2019/08/31 Python
python实现小程序推送页面收录脚本
2020/04/20 Python
基于Python的Jenkins的二次开发操作
2020/05/12 Python
HTML5 Web 存储详解
2016/09/16 HTML / CSS
中东最大的在线宠物店:Dubai Pet Food
2020/06/11 全球购物
介绍一下ICMP(Internet Control Message Protocol)Internet控制信息协议
2016/11/26 面试题
毕业设计计划书
2014/01/09 职场文书
培训协议书范本
2014/04/22 职场文书
司法工作人员群众路线对照检查材料思想汇报
2014/09/30 职场文书
领导干部作风建设工作总结
2014/10/23 职场文书
初中班主任心得体会
2016/01/07 职场文书
《狼牙山五壮士》教学反思
2016/02/17 职场文书
浅谈Redis跟MySQL的双写问题解决方案
2022/02/24 Redis
《巫师》是美食游戏?CDPR10月将推出《巫师》官方食谱
2022/04/03 其他游戏