关于touch事件对于性能的影响
第一次写博客随笔,废话不多说,直接进入正题。
最近一直专注于移动终端的开发,碰到了一个比较棘手的事情,就是touch事件,大家都知道,touch事件有几种,无非就是touchstart,touchmove,touchend,touchstart和touchend应该算是单次触发式的事件,而touchmove因为是手指触碰之后,可以持续触发的事件,然后,每次触发一次或者说是某一段的touchmove的时候,也就是在持续进行js解析和执行,这样,会阻塞页面渲染,比如,我touchmove触发一段,然后渲染一次html页面,然后我手指按着不放,进入第二段touchmove事件,这个时候,从第一次的html渲染到第二次的html渲染之间,会有阻塞现象,短时间的触发还好,可能感觉不到,然后如果你需要长时间去触发的话,就会很明显的觉的卡顿,万一你的手机配置不高,性能不好的话,那就会卡的不要不要的!
然后,这个问题也不是不能得到解决,先附上一段代码:
$("body").on("touchstart", function(e) {
e.preventDefault();
startX = e.originalEvent.changedTouches[0].pageX,
startY = e.originalEvent.changedTouches[0].pageY;
});
$("body").on("touchmove", function(e) {
e.preventDefault();
moveEndX = e.originalEvent.changedTouches[0].pageX,
moveEndY = e.originalEvent.changedTouches[0].pageY,
X = moveEndX - startX,
Y = moveEndY - startY;
if ( Math.abs(X) > Math.abs(Y) && X > 0 ) {
//你要渲染的页面
}
});
这段代码意思是,当我手指触碰在手机显示屏时,从左滑到右边,会触发alert事件,然而大家看到了某个方法没有,对,没错,那就是e.preventDefault();只要触发一次touchmove,他就会做一次判断,取消body的默认行为,那这样子势必会有性能问题,所以,我们不妨把e.preventDefault()保存到一个变量中:
function updateTouches(event) {
touches = event.touches;
}
然后监听touchmove事件:
document.addEventListener('touchmove', updateTouches);
然后用windows的requestAnimationFrame,可以让动画更流畅,运行性能更高,通过requestAnimationFrame来更新渲染页面。当然,如果你想兼容各种浏览器,需要对不同的浏览器判断是否支持这个方法,这里我们假设浏览器支持这个方法。
window.requestAnimationFrame(renderEverything);
这里我们队这个方法传入了一个renderEverything的函数参数,这个函数里面就是touchmove事件具体要干的事情:
function renderEverything() {
//这里就是你要做的事情
}
我们把以上代码结合起来:
$("body").on("touchstart", function(e) {
document.addEventListener('touchmove', updateTouches);
startX = e.originalEvent.changedTouches[0].pageX,
startY = e.originalEvent.changedTouches[0].pageY;
});
window.requestAnimationFrame(renderEverything);
function updateTouches(e) {
touches = e.preventDefault();
}
function renderEverything() {
$("body").on("touchmove", function(e) {
moveEndX = e.originalEvent.changedTouches[0].pageX,
moveEndY = e.originalEvent.changedTouches[0].pageY,
X = moveEndX - startX,
Y = moveEndY - startY;
if (Math.abs(X) > Math.abs(Y) && X > 0) {
//你要渲染的页面
}
})
}
虽然这样子不能完完全全移除卡顿的现象,通常这和整个页面结构,以及js解析和css渲染紧密相关,但是,这样子的确可以大大的优化使用touch时候的性能。
第一次写博文,不足之处请大家指教,我肯定虚心接受!
关于touch事件对于性能的影响的更多相关文章
- 移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法
这两天自己在写一个手机网页,用到了触屏滑动的特效,就是往右滑动的时候左侧隐藏的菜单从左边划出来. 做完之后在手机原生浏览器中运行正常,但在QQ和微信中打开,发现touchmove只会触发一次,而且to ...
- JavaScript 事件对内存和性能的影响
程序代码: <%-- Created by IntelliJ IDEA. User: 乔克叔叔 Date: 2017/12/26 Time: 16:45 To change this templ ...
- Android开发之Touch事件分发机制
原地址http://www.cnblogs.com/linjzong/p/4191891.html Touch事件分发中只有两个主角:ViewGroup和View.Activity的Touch事件事实 ...
- H5案例分享:移动端滑屏 touch事件
移动端滑屏 touch事件 移动端触屏滑动的效果的效果在电子设备上已经被应用的越来越广泛,类似于PC端的图片轮播,但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch ...
- Android事件分发机制(二)30分钟弄明白Touch事件分发机制
Touch事件分发中只有两个主角:ViewGroup和View.Activity的Touch事件事实上是调用它内部的ViewGroup的Touch事件,可以直接当成ViewGroup处理. View在 ...
- 高性能JavaScript-JS脚本加载与执行对性能的影响
在web产品优化准则中,很重要的一条是针对js脚本的加载和执行方式的优化.本篇文章简单描述一下其中的优化准则. 1. 脚本加载优化 1.1 脚本位置对性能的影响 优化页面加载性能的原则之一是将scri ...
- Android:30分钟弄明白Touch事件分发机制
Touch事件分发中只有两个主角:ViewGroup和View.Activity的Touch事件事实上是调用它内部的ViewGroup的Touch事件,可以直接当成ViewGroup处理. View在 ...
- 移动端 js touch事件
随着智能手机和平板电脑的普及, 越来越多的人用移动设备浏览网页,我们平时在pc浏览器上用的鼠标事件,比如:click, mouseover等, 已经无法满足移动设备触摸屏的特点,触摸时代的到来,离不开 ...
- 【Stage3D学习笔记续】山寨Starling(十一):Touch事件体系
我们的山寨Starling版本将会在这里停止更新了,主要还是由于时间比较有限,而且我们的山寨版本也很好的完成了他的任务“了解Starling的核心渲染”,接下来的Starling解析我们将会直接阅读S ...
随机推荐
- HTML5开发手机项目—个人总结
让网页的宽度自适应屏幕<meta name="viewport" content="width=device-width"/> 1)html上加 ...
- Device.js – 快速检测平台、操作系统和方向信息
在 Web 项目中,有时候我们需要根据程序运行的环境采取特定操作.Device.js 是一个很小的 JavaScript 库,它简化了编写和平台,操作系统或浏览器相关的条件 CSS 或 JavaScr ...
- android高级---->AsyncTask的源码分析
在Android中实现异步任务机制有两种方式,Handler和AsyncTask,它在子线程更新UI的例子可以参见我的博客(android基础---->子线程更新UI).今天我们通过一个小的案例 ...
- SQL Server里的INTERSECT ALL
在上一篇文章里,我讨论了INTERSECT设置操作的基础,它和INNER JOIN的区别,还有为什么需要好的索引设计支持.今天我想谈下SQL Server里并未实现的INTERSECT ALL操作. ...
- Java魔法堂:打包知识点之META-INF/MAINFEST.MF
一.前言 通过执行形如 jar -cvf src.jar src 命令将多个.class文件打包成JAR包时,你会发现JAR包中除了src目录外还多了个MATE-INF/MAINFEST.MF ...
- .Net魔法堂:史上最全的ActiveX开发教程——发布篇
一. 前言 接着上一篇<.Net魔法堂:史上最全的ActiveX开发教程——开发篇>,本篇讲述如何发布我们的ActiveX. 二.废话少讲,马上看步骤! 1. 打包 C#开发的Activ ...
- PowerDesigner的安装和数据库创建(转载)
此文描述详细,特此转载,仅复制了大部分内容,可参考原文CodeSmith和PowerDesigner的安装和数据库创建(原创) 请大家不要用于商业用途哈,要支持正版,大家都是做软件的,知道开发一套软件 ...
- MyBatis动态SQL使用,传入参数Map中的Key判断
<select id="" parameterType="Map" resultMap="commodityResultMap" &g ...
- 常见的几种 CSS 水平垂直居中解决办法
用CSS实现元素的水平居中,比较简单,可以设置text-align center,或者设置 margin-left:auto; margin-right:auto 之类的即可. 主要麻烦的地方还是在垂 ...
- 数论 - 算数基本定理的运用 --- nefu 118 : n!后面有多少个0
题目链接:http://acm.nefu.edu.cn/JudgeOnline/problemshow.php Mean: 略. analyse: 刚开始想了半天都没想出来,数据这么大,难道是有什么 ...