常见的前端面试题目 - 用户交互优化 - RequestAnimationFrame 避免动画掉帧

// 基本使用方式
function animate() {
  // 更新动画状态
  element.style.left = `${position++}px`;
  
  // 递归调用，创建动画循环
  requestAnimationFrame(animate);
}

// 开始动画
requestAnimationFrame(animate);

// 取消动画
const animationId = requestAnimationFrame(animate);
cancelAnimationFrame(animationId);

// 平滑滚动到页面顶部
function scrollToTop() {
  const currentPosition = window.pageYOffset;
  
  if (currentPosition > 0) {
    // 以每次滚动距离的 10% 速度平滑滚动
    window.scrollTo(0, currentPosition - currentPosition / 10);
    requestAnimationFrame(scrollToTop);
  }
}

// 点击按钮启动平滑滚动
document.querySelector('.scroll-top-button').addEventListener('click', function() {
  requestAnimationFrame(scrollToTop);
});

// 不好的做法：多个元素交替读写，导致多次强制重排
function badAnimation() {
  const boxes = document.querySelectorAll('.box');
  
  boxes.forEach(box => {
    // 读取 DOM (强制浏览器计算最新布局)
    const width = box.offsetWidth;
    
    // 写入 DOM (改变布局)
    box.style.width = `${width + 1}px`;
    
    // 再次读取 (又强制重新计算布局)
    const height = box.offsetHeight;
    
    // 再次写入 (又改变布局)
    box.style.height = `${height + 1}px`;
  });
  
  requestAnimationFrame(badAnimation);
}

// 好的做法：先批量读取所有数据，再批量写入
function goodAnimation() {
  const boxes = document.querySelectorAll('.box');
  const measurements = [];
  
  // 读取阶段 - 一次性读取所有需要的数据
  boxes.forEach(box => {
    measurements.push({
      width: box.offsetWidth,
      height: box.offsetHeight,
      element: box
    });
  });
  
  // 写入阶段 - 一次性完成所有 DOM 修改
  measurements.forEach(data => {
    data.element.style.width = `${data.width + 1}px`;
    data.element.style.height = `${data.height + 1}px`;
  });
  
  requestAnimationFrame(goodAnimation);
}

/*
布局抖动可视化比较：

不好的做法 (多次重排)：
┌─────────────────────────────────┐
│ 读取元素1尺寸 → 重排 #1         │
│ 修改元素1尺寸                   │
│ 读取元素1高度 → 重排 #2         │
│ 修改元素1高度                   │
│ 读取元素2尺寸 → 重排 #3         │
│ 修改元素2尺寸                   │
│ 读取元素2高度 → 重排 #4         │
│ 修改元素2高度                   │
│ ...                             │
└─────────────────────────────────┘
结果：一帧内多次强制重排，性能下降

好的做法 (批量处理)：
┌─────────────────────────────────┐
│ 读取所有元素尺寸 → 重排 #1      │
│ 修改所有元素尺寸和高度          │
└─────────────────────────────────┘
结果：一帧内只有一次重排，性能提升
*/

// 不好的做法：修改 left/top (触发布局)
function inefficientMove() {
  box.style.left = `${xPos}px`;
  box.style.top = `${yPos}px`;
}

// 好的做法：使用 transform (只触发合成)
function efficientMove() {
  box.style.transform = `translate(${xPos}px, ${yPos}px)`;
}