详解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 animation实现简易幻灯片轮播特效
Sep 27 HTML / CSS
CSS实现雨滴动画效果的实例代码
Oct 08 HTML / CSS
HTML5移动端开发遇见的东西
Oct 11 HTML / CSS
html5本地存储 localStorage操作使用详解
Sep 20 HTML / CSS
详解三种方式实现平滑滚动页面到顶部的功能
Apr 23 HTML / CSS
Html5移动端适配IphoneX等机型的方法
Jun 25 HTML / CSS
使用canvas实现黑客帝国数字雨效果
Jan 02 HTML / CSS
amaze ui 的使用详细教程
Aug 19 HTML / CSS
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
Apr 29 HTML / CSS
CSS 新特性 contain控制页面的重绘与重排问题
Apr 30 HTML / CSS
CSS3 Tab动画实例之背景切换动态效果
Aug 23 HTML / CSS
HTML5之高度塌陷问题的解决
Jun 01 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
解决更换PHP5.4以上版本后Dedecms后台登录空白问题的方法
2015/10/23 PHP
PHP不使用递归的无限级分类简单实例
2016/11/05 PHP
PHP实现限制IP访问的方法
2017/04/20 PHP
php中Ioc(控制反转)和Di(依赖注入)
2017/05/07 PHP
Laravel 5.5 异常处理 &amp; 错误日志的解决
2019/10/17 PHP
基于PHP+Mysql简单实现了图书购物车系统的实例详解
2020/08/06 PHP
JavaScript 异步调用框架 (Part 1 - 问题 &amp; 场景)
2009/08/03 Javascript
jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
2011/10/01 Javascript
JavaScript 用Node.js写Shell脚本[译]
2012/09/20 Javascript
iframe 上下滚动条如何默认在下方实现原理
2012/12/10 Javascript
通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
2013/07/13 Javascript
jQuery下拉框的简单应用
2016/06/24 Javascript
高效Web开发的10个jQuery代码片段
2016/07/22 Javascript
jQuery实现磁力图片跟随效果完整示例
2016/09/16 Javascript
浅谈js键盘事件全面控制
2016/12/01 Javascript
jQuery日程管理控件glDatePicker用法详解
2017/03/29 jQuery
addeventlistener监听scroll跟touch(实例讲解)
2017/08/04 Javascript
JavaScript实现精美个性导航栏筋斗云效果
2017/10/29 Javascript
jQuery动态添加元素无法触发绑定事件的解决方法分析
2018/01/02 jQuery
JS兼容所有浏览器的DOMContentLoaded事件
2018/01/12 Javascript
Vue中保存数据到磁盘文件的方法
2018/09/06 Javascript
[04:48]DOTA2上海特锦赛小组赛第三日 TOP10精彩集锦
2016/02/28 DOTA
[46:14]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python迭代用法实例教程
2014/09/08 Python
apache部署python程序出现503错误的解决方法
2017/07/24 Python
python多进程提取处理大量文本的关键词方法
2018/06/05 Python
10个Python小技巧你值得拥有
2018/09/29 Python
Python 使用 PyMysql、DBUtils 创建连接池提升性能
2019/08/14 Python
基于python plotly交互式图表大全
2019/12/07 Python
python dir函数快速掌握用法技巧
2020/12/09 Python
公司董事长职责
2013/12/12 职场文书
老总助理工作岗位职责
2014/02/06 职场文书
食品流通安全承诺书
2014/05/22 职场文书
行政专员岗位职责范本
2014/08/26 职场文书
最感人的道歉情书
2015/05/12 职场文书
远程教育集中轮训基层干部培训班学习心得体会
2016/01/09 职场文书