常見的前端面試題目 - 用戶交互優化 - 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)`;
}