フレームレートとは？60fpsの仕組みとパフォーマンス最適化

アニメーションが「なめらか」に見えるとき、
裏ではある数字が動いています。

それが フレームレート（fps） です。

今回は、

• フレームレートって何？
• なぜ60fpsなの？
• 重くなるとどうなるの？
• どうやって対処するの？

を、できるだけやさしく整理します。

1. フレームレートとは？

fps = frames per second

fpsは「1秒間に何枚の画像を表示しているか」という意味です。

• 60fps → 1秒に60枚
• 30fps → 1秒に30枚

パラパラ漫画と同じ原理ですね。

2. なぜ60fpsが基準なの？

多くのディスプレイは 1秒間に60回画面を書き換えます。

つまり、

画面の更新タイミングに合わせて描画できれば
一番なめらかに見える

ということです。

そのため、ブラウザの
requestAnimationFrame() は

約16.6msごと（= 1000ms ÷ 60） に呼ばれます。

🔗 関連記事

• #01 requestAnimationFrameの使い方
• #02 deltaTimeとは？

3. フレームが落ちるとは？

では、もし処理が重くなったら？

例えば…

• 計算が多すぎる
• DOM操作が多い
• ループが重い
• 大量描画している

この場合、16.6ms以内に処理が終わりません。

すると…

👉 1フレーム飛ばされます

結果：

• 60fps → 30fpsに落ちる
• カクつく
• 一瞬止まったように見える

これが「フレーム落ち」です。

4. ブラウザの内部で起きていること

1フレームの中では、ざっくりこうなっています。

1. JavaScript実行
2. Style計算
3. Layout
4. Paint
5. Composite

この全体が 16.6ms以内 に終わらないと
次のフレームに間に合いません。

5. fpsが落ちると何が問題？

❌ 見た目が悪くなる

カクつく

❌ easingが崩れる

減速が不自然になる

❌ 体感が悪くなる

「重い」と感じる

特に #03 easing の記事と強くつながっています。

6. 対策の基本

初心者向けに、まずはこれだけ覚えてください。

① 重い処理はループの外へ

// 悪い例
function animate() {
  heavyCalculation();
  requestAnimationFrame(animate);
}

② DOM操作を減らす

styleを何度も変更しない。

③ transformを使う

left より transform の方が軽いです。

box.style.transform = `translateX(${x}px)`;

7. ここが超重要：fpsは一定ではない

実は…

rAFは「常に60fps」ではありません

PCが重ければ：

• 33ms（≈30fps）
• 50ms
• それ以上

になることもあります。

だからこそ #02 の deltaTime が重要になります。

実験：軽い処理 vs 重い処理

🎯 やること

1. 軽いアニメーションを見る
2. わざと重くしたアニメーションを見る
3. consoleで dt を観察

👀 観察ポイント

• dt が 16前後 → 正常
• dt が 30以上 → フレーム落ち
• 値がバラつく → 安定していない

💡 ここで気づいてほしいこと

fpsは保証されない

だから、

✔ 固定速度で動かすには deltaTime が必要
✔ easingにも時間基準が必要

という設計思想につながります。

8. 次の記事へ

ここまでで、

• フレームレートの正体
• なぜ60fpsなのか
• なぜ崩れるのか

が分かりました。

次は、

👉 #05 cancelAnimationFrame設計

止め方の設計 を整理します。

アニメーションは
「動かす」より「止める」が難しいです。

🔎 このラボの全体像はこちら
→ UI Architecture Roadmap