touchmove卡顿问题

Question

我做的手机端滑动幻灯片，但是滑动的时候总是一卡一卡的，完全不流畅，不知道为什么

arrLi[i].addEventListener('touchmove',function(event){
                event.preventDefault();

                xMove = event.touches[0].clientX;
                direction = xMove - xDown;
                xTranslateMove = xTranslateEnd+direction;
                getUl.style.transform = 'translate('+xTranslateMove+'px,0)';
                getUl.style.webkitTransitionDuration = "0ms";
                //debounce(moveX);

            })

Answer 1

移动端的性能本身就不是很强。
这段代码看不出啥大问题，可以优化的点是，没加3d,transform没做前缀检查。

我的建议是css布局，在js的move事件后直接改class，可能会好很多。

要想流畅，必须开3d，硬件加速。

Answer 2

一卡一卡的只是个现象，有很式原因都可能造成这个现象：

• 每次移到的距离过大，移动间隔的时间过长。人的视觉暂留大概是1/24秒，通常平滑的动画都会在每秒30帧以上。

• 由于计算错误，位置变化如果不是流线行的也会出现卡的现象

• 如果一个动画由多个子动画组成，子动画的不连贯也会造成卡的现象

• ……

至于你遇到的是什么原因，我就不知道了，自己可以跟踪调试一下再来分析。

Answer 3

这些还是用别人的组件比较好，兼容性啊什么的比较好。。。