道場 — 自由操作

要素数と CSS プロパティを自由に組み合わせ、LoAF API で計測されたフレーム内訳を観察します。実行ボタンを押すまでアニメーションは止まっています（低スペック端末保護）。

走る段階だけ点灯

Layout は「どこに置くか」を再計算する最も重い段階。 Paint はピクセルを塗り、 Composite は既にあるレイヤを GPU で重ねるだけで最軽量。

§ Canvas ／描画エリアDOM Elements

FPS

—

Frame Budget

—

Style+Layout

—

Rendering

—

CSS プロパティから予測される「走るべきフェーズ」（理論）と、 LoAF API で計測した実際の挙動（実測）を並べています。
両者が一致（判定 ✓）していれば、 CSS Triggers の予測どおりブラウザが動いている証拠です。

走る走らない一致不一致

Phase	理論	実測	判定	時間
Layout				—
Paint + Composite LoAF では Paint と Composite を分離できないため合算値				—

この稽古場はいかがでしたか？