详解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 相关文章推荐
使用CSS禁止textarea调整大小功能的方法
Mar 13 HTML / CSS
css3 实现滚动条美化效果的实例代码
Jan 06 HTML / CSS
HTML5标签小集
Aug 02 HTML / CSS
Bootstrap 学习分享
Nov 12 HTML / CSS
html5中valid、invalid、required的定义
Feb 21 HTML / CSS
浅谈h5自定义audio(问题及解决)
Aug 19 HTML / CSS
Html5新标签datalist实现输入框与后台数据库数据的动态匹配
May 18 HTML / CSS
HTML5单页面手势滑屏切换原理分析
Jul 10 HTML / CSS
HTML5实现桌面通知 提示功能
Oct 11 HTML / CSS
css如何把元素固定在容器底部的四种方式
Jun 16 HTML / CSS
详解CSS3浏览器兼容
Dec 24 HTML / CSS
CSS 鼠标选中文字后改变背景色的实现代码
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
PHP 编程安全性小结
2010/01/08 PHP
PHP Class&amp;Object -- 解析PHP实现二叉树
2013/06/25 PHP
php如何计算两坐标点之间的距离
2018/12/29 PHP
Laravel登录失败次数限制的实现方法
2020/08/26 PHP
Jquery判断IE6等浏览器的代码
2011/04/05 Javascript
jquery 循环显示div的示例代码
2013/10/18 Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
2016/01/26 Javascript
js获取html的span标签的值方法(超简单)
2016/07/26 Javascript
jquery实现垂直和水平菜单导航栏
2020/08/27 Javascript
footer定位页面底部(代码分享)
2017/03/07 Javascript
JavaScript的setter与getter方法
2017/11/29 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
2018/07/05 Javascript
jQuery点击页面其他部分隐藏下拉菜单功能
2018/11/27 jQuery
JS实现随机生成10个手机号的方法示例
2018/12/07 Javascript
html+vue.js 实现漂亮分页功能可兼容IE
2020/11/07 Javascript
vue 导航守卫和axios拦截器有哪些区别
2020/12/19 Vue.js
Python中动态获取对象的属性和方法的教程
2015/04/09 Python
利用Python暴力破解zip文件口令的方法详解
2017/12/21 Python
python http接口自动化脚本详解
2018/01/02 Python
PyQt5打开文件对话框QFileDialog实例代码
2018/02/07 Python
Python3中关于cookie的创建与保存
2018/10/21 Python
在macOS上搭建python环境的实现方法
2019/08/13 Python
Python lambda表达式filter、map、reduce函数用法解析
2019/09/11 Python
Python Web静态服务器非堵塞模式实现方法示例
2019/11/21 Python
Python+OpenCV实现将图像转换为二进制格式
2020/01/09 Python
Python实现查找数据库最接近的数据
2020/06/08 Python
python删除文件、清空目录的实现方法
2020/09/23 Python
Python实现网络聊天室的示例代码(支持多人聊天与私聊)
2021/01/27 Python
html标签之Object和EMBED标签详解
2013/07/04 HTML / CSS
英国最大的在线快递公司之一:ParcelHero
2019/11/04 全球购物
群众路线教育实践活动方案
2014/02/02 职场文书
大学辅导员述职报告
2015/01/10 职场文书
歌舞青春观后感
2015/06/10 职场文书
优秀学生干部主要事迹材料
2015/11/04 职场文书
企业内部管理控制:银行存款控制制度范本
2020/01/10 职场文书
详解Java实现设计模式之责任链模式
2021/06/23 Java/Android