/* @file index.html */

rAF vs setTimeout 动画对比

绿色用 rAF 驱动，橙色用 setTimeout(fn, 16) 模拟。观察帧率差异。

rAF 驱动 ↓

setTimeout(fn, 16) ↓

/* @file main.js */ const boxRaf = document.getElementById('box-raf'); const boxSt = document.getElementById('box-st'); const statsEl = document.getElementById('stats'); let running = false; let rafId, stId; let rafFrames = 0, stFrames = 0; let startTime, lastRafTime, lastStTime; let rafJitter = 0, stJitter = 0; function reset() { boxRaf.style.transform = 'translateX(0)'; boxSt.style.transform = 'translateX(0)'; rafFrames = 0; stFrames = 0; rafJitter = 0; stJitter = 0; } function getMaxX() { return boxRaf.parentElement.clientWidth - boxRaf.clientWidth; } function animateRaf(ts) { if (!running) return; if (!startTime) { startTime = ts; lastRafTime = ts; } const dt = ts - lastRafTime; if (rafFrames > 0) rafJitter += Math.abs(dt - 16.67); lastRafTime = ts; rafFrames++; const elapsed = ts - startTime; const maxX = getMaxX(); const pos = ((elapsed / 3000) % 1) * maxX; boxRaf.style.transform = `translateX(${pos}px)`; updateStats(); rafId = requestAnimationFrame(animateRaf); } function animateSt() { if (!running) return; const now = performance.now(); if (!lastStTime) lastStTime = now; const dt = now - lastStTime; if (stFrames > 0) stJitter += Math.abs(dt - 16); lastStTime = now; stFrames++; const elapsed = now - startTime; const maxX = getMaxX(); const pos = ((elapsed / 3000) % 1) * maxX; boxSt.style.transform = `translateX(${pos}px)`; updateStats(); stId = setTimeout(animateSt, 16); } function updateStats() { const elapsed = ((performance.now() - startTime) / 1000).toFixed(1); const rafFps = rafFrames > 0 ? (rafFrames / (elapsed || 1)).toFixed(1) : '0'; const stFps = stFrames > 0 ? (stFrames / (elapsed || 1)).toFixed(1) : '0'; const rafAvgJitter = rafFrames > 1 ? (rafJitter / (rafFrames - 1)).toFixed(2) : '0'; const stAvgJitter = stFrames > 1 ? (stJitter / (stFrames - 1)).toFixed(2) : '0'; statsEl.innerHTML = `rAF ${rafFps} fps (jitter ${rafAvgJitter}ms) | setTimeout ${stFps} fps (jitter ${stAvgJitter}ms) | ${elapsed}s`; } document.getElementById('btn-start').addEventListener('click', () => { if (running) return; running = true; reset(); startTime = null; lastRafTime = null; lastStTime = null; rafId = requestAnimationFrame(animateRaf); animateSt(); }); document.getElementById('btn-stop').addEventListener('click', () => { running = false; cancelAnimationFrame(rafId); clearTimeout(stId); });