2018正版葡京赌侠诗有关touch事件对于性能的震慑

by admin on 2019年1月14日

    第一次写博客小说,废话不多说,直接进去正题。

   
近年来直接小心于移动终端的开支,碰着了一个相比较吃力的事务,就是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);

此处大家队这多少个措施传入了一个render伊夫(Eve)rything的函数参数,那多少个函数里面就是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);

2018正版葡京赌侠诗, 

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

    第五次写博文,不足之处请我们指教,我决然虚心接受!

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图