欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

关于touch事件对于性能的影响

程序员文章站 2022-03-23 12:27:26
第一次写博客随笔,废话不多说,直接进入正题。 最近一直专注于移动终端的开发,碰到了一个比较棘手的事情,就是touch事件,大家都知道,touch事件有几种,无非就是touchstart,touchmove,touchend,touchstart和touchend应该算是单次触发式的事件,而to... ......

    第一次写博客随笔,废话不多说,直接进入正题。

    最近一直专注于移动终端的开发,碰到了一个比较棘手的事情,就是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时候的性能。

    第一次写博文,不足之处请大家指教,我肯定虚心接受!