关于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时候的属性。

    第贰回写博文,不足之处请我们指教,小编自然虚心接受!

本文由明仕msyz手机版发布于宠物-蜂鸟摄影论坛,转载请注明出处:关于touch事件对于性能的影响

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。