js requestAnimationFrame移动端卡顿现象

在移动端使用requestAnimationFrame进行动画渲染时，可能会出现卡顿现象。这是因为移动设备的屏幕刷新率通常为60Hz，而requestAnimationFrame默认每秒刷新60次，如果在每次刷新时需要进行大量计算或者频繁地修改DOM，就会导致卡顿现象的出现。

为了避免这种情况的发生，可以采取以下措施：
1. 尽量减少每次刷新时需要进行的计算量，例如将计算结果缓存起来，避免重复计算。
2. 将频繁的DOM操作合并为一次操作，例如使用CSS3的transform属性进行平移、旋转等操作，而不是直接修改元素的left、top等属性。
3. 降低requestAnimationFrame的刷新频率，例如将刷新频率降低到30Hz或者更低。

下面是一个示例代码，演示如何使用requestAnimationFrame进行元素横移动画，并避免卡顿现象的出现：

const box = document.querySelector('.box');
let move;
let lastTime = 0;
let interval = 1000 / 30; // 刷新频率为30Hz

function moveBox(timestamp) {
  if (!lastTime) {
    lastTime = timestamp;
  }
  const elapsed = timestamp - lastTime;
  if (elapsed > interval) {
    move = parseInt(getComputedStyle(box).left);
    if (move < 800) {
      box.style.transform = `translateX(${move + 8}px)`;
      lastTime = timestamp;
    }
  }
  requestAnimationFrame(moveBox);
}

requestAnimationFrame(moveBox);