详解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 相关文章推荐
html5+css3之CSS中的布局与Header的实现
Nov 21 HTML / CSS
利用CSS3实现文本框的清除按钮相关的一些效果
Jun 23 HTML / CSS
详解CSS3中@media的实际使用
Aug 04 HTML / CSS
详解background属性的8个属性值(面试题)
Nov 02 HTML / CSS
CSS3实现苹果手机解锁的字体闪亮效果示例
Jan 05 HTML / CSS
HTML5 Canvas的常用线条属性值总结
Mar 17 HTML / CSS
HTML5学习心得总结(推荐)
Jul 08 HTML / CSS
基于Html5实现的语音搜索功能
May 13 HTML / CSS
html5实现滑块功能之type=&quot;range&quot;属性
Feb 18 HTML / CSS
遮罩层 + Iframe实现界面自动显示的示例代码
Apr 26 HTML / CSS
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
Oct 16 HTML / CSS
box-shadow单边阴影的实现
May 21 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
一个取得文件扩展名的函数
2006/10/09 PHP
php程序的国际化实现方法(利用gettext)
2011/08/14 PHP
基于Snoopy的PHP近似完美获取网站编码的代码
2011/10/23 PHP
PHP如何通过带尾指针的链表实现'队列'
2020/10/22 PHP
JS+XML 省份和城市之间的联动实现代码
2009/10/14 Javascript
jQuery.extend 函数的详细用法
2012/06/27 Javascript
JS 模态对话框和非模态对话框操作技巧汇总
2013/04/15 Javascript
jquery实现带单选按钮的表格行选中时高亮显示
2013/08/01 Javascript
html dom节点操作(获取/修改/添加或删除)
2014/01/23 Javascript
JQuery弹出层示例可自定义
2014/05/19 Javascript
javascript获取隐藏元素(display:none)的高度和宽度的方法
2014/06/06 Javascript
javascript 获取函数形参个数
2014/07/31 Javascript
Javascript Objects详解
2014/09/04 Javascript
jquery移动节点实例
2015/01/14 Javascript
JavaScript实现数字数组正序排列的方法
2015/04/06 Javascript
浅谈JavaScript正则表达式分组匹配
2015/04/10 Javascript
Angularjs中UI Router全攻略
2016/01/29 Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
2016/05/20 Javascript
微信小程序 弹幕功能简单实例
2017/02/14 Javascript
AngularJS自定义表单验证功能实例详解
2018/08/24 Javascript
Flutter实现仿微信底部菜单栏功能
2019/09/18 Javascript
基于JavaScript实现留言板功能
2020/03/16 Javascript
jquery实现拖拽小方块效果
2020/12/10 jQuery
python 2.6.6升级到python 2.7.x版本的方法
2016/10/09 Python
pycharm运行程序时看不到任何结果显示的解决
2020/02/21 Python
在matplotlib中改变figure的布局和大小实例
2020/04/23 Python
python如何爬取网页中的文字
2020/07/28 Python
css3实现一款模仿iphone样式的注册表单
2013/03/20 HTML / CSS
ZWILLING双立人英国网上商店:德国刀具锅具厨具品牌
2018/05/15 全球购物
3D空间设计学生找工作的自我评价
2013/10/28 职场文书
医院实习介绍信
2014/01/12 职场文书
商场中秋节广播稿
2014/01/17 职场文书
学校群众路线专项整治方案
2014/10/31 职场文书
催款律师函范文
2015/05/27 职场文书
2016个人廉洁自律承诺书
2016/03/25 职场文书
Golang使用Panic与Recover进行错误捕获
2022/03/22 Golang