详解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实现3D旋转书本效果
Mar 21 HTML / CSS
CSS3教程(10):CSS3 HSL声明设置颜色
Apr 02 HTML / CSS
css3 box-sizing属性使用参考指南
Jan 08 HTML / CSS
css3让div随鼠标移动而抖动起来
Feb 10 HTML / CSS
css3实现动画的三种方式
Aug 24 HTML / CSS
canvas实现圆绘制的示例代码
Sep 11 HTML / CSS
Html5 实现微信分享及自定义内容的流程
Aug 20 HTML / CSS
html5定位并在百度地图上显示的示例
Apr 27 HTML / CSS
Html5实现移动端、PC端 刮刮卡效果
Jun 30 HTML / CSS
html5中canvas图表实现柱状图的示例
Nov 13 HTML / CSS
利用html+css实现菜单栏缓慢下拉效果的示例代码
Mar 30 HTML / CSS
css3属性选择器 “~”(波浪号) “,”(逗号) “+”(加号)和 “>”(大于号)
Apr 19 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
咖啡店都有些什么常规豆子呢?有什么风味在里面
2021/03/04 咖啡文化
php $_ENV为空的原因分析
2009/06/01 PHP
PHP return语句的另一个作用
2014/07/30 PHP
THINKPHP5.1 Config的配置与获取详解
2020/06/08 PHP
JS数学函数Exp使用说明
2012/08/09 Javascript
Jquery获得控件值的三种方法总结
2014/02/13 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
2014/08/11 Javascript
JS实现霓虹灯文字效果的方法
2015/08/06 Javascript
jQuery超赞的评分插件(8款)
2015/08/20 Javascript
使用jQuery实现Web页面换肤功能的要点解析
2016/05/12 Javascript
模板视图和AngularJS之间冲突的解决方法
2016/11/22 Javascript
浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)
2017/02/14 Javascript
HTML的select控件美化
2017/03/27 Javascript
基于jquery实现二级联动效果
2017/03/30 jQuery
vue cli升级webapck4总结
2018/04/04 Javascript
Vue动态获取width的方法
2018/08/22 Javascript
微信小程序保存多张图片的实现方法
2019/03/05 Javascript
JavaScript cookie原理及使用实例
2020/05/08 Javascript
JavaScript实现与web通信的方法详解
2020/08/07 Javascript
python实现端口转发器的方法
2015/03/13 Python
在树莓派2或树莓派B+上安装Python和OpenCV的教程
2015/03/30 Python
实例讲解Python设计模式编程之工厂方法模式的使用
2016/03/02 Python
python flask几分钟实现web服务的例子
2019/07/26 Python
html5 实现客户端验证上传文件的大小(简单实例)
2016/05/15 HTML / CSS
美国职棒大联盟的官方手套、球和头盔:Rawlings
2020/02/15 全球购物
飞利浦美国官网:Philips美国
2020/02/28 全球购物
Java的五个基础面试题
2016/02/26 面试题
木马的传播途径主要有哪些
2016/04/08 面试题
继承时候类的执行顺序问题,一般都是选择题,问你将会打印出什么?
2015/11/18 面试题
追悼会主持词
2014/03/20 职场文书
贷款承诺书范文
2014/05/19 职场文书
科技节口号
2014/06/19 职场文书
关于青春的演讲稿800字
2014/08/22 职场文书
指导老师鉴定意见
2015/06/05 职场文书
python 中的@运算符使用
2021/05/26 Python
sql注入报错之注入原理实例解析
2022/06/10 MySQL