requestAnimationFrame

問題は、setInterval(fn, 16) によるアニメーションが当てにならないことだ。間隔が画面のリフレッシュと同期しないためコマが飛んだり重なったりするし、タブが非表示でもCPUを消費し続ける。requestAnimationFrame(callback) は、画面（60Hzでも120Hzでも、その画面の速度）に合わせて次のフレームの直前にコールバックを呼ぶようブラウザに頼む。結果として動きが滑らかになり、タブが見えていないときは自動的に止まる（電池とCPUの節約）。基本パターンは、コールバックが1コマ進めてから再び rAF を呼ぶ、画面と同期したループだ。用途は、JS駆動のアニメーション全般、ゲームループ、スムーズスクロール、canvas描画など。補完的なAPIとして、急がない処理向けの requestIdleCallback がある。目安として、可能ならCSSでアニメーションさせる（さらに低コスト）。JSが必要なら、rAFが適切な道具だ。