§ 01 — Lab
ブラウザが 1 枚の絵をどう描くかを、100〜2000 個の実 DOM 要素を操作しながら体験します。 LoAF API で実測したフレーム内訳と CSS Triggers の理論値を並置し、 Layout / Paint / Composite のコスト差を手元で確認できる稽古場です。
8 ステップのガイド付き。Layout が走る例・走らない例を順番に観察します。初見ならこちらから。
開く制約なしの実験場。要素数とプロパティを自由に組み合わせて計測できます。
開くブラウザが 1 枚の絵をどう作っているかは、文字の上で追うだけでは腑に落ちにくい領域です。
DOM と CSS を書いて画面が動くところまでは馴染みがあっても、
「この top の変更で何が起きたか」「なぜ transform は軽いのか」
を 実測できる形で説明できる 人はそう多くありません。
この Lab では、実際に 100〜2000 個の DOM 要素を触りながら、 (Long Animation Frames API) で 1 フレームの内訳を観察します。 / / のどこまで走ったかを、 データ（理論）と LoAF の実測値の両方で並べて確認できます。
稽古場での体験は、ゴールではなく入り口です。 サイト内で概念を掴んだら、同じ挙動を で 再現してみてください。Lab 末尾に手順へのリンクがあります。
—（未計測）のまま表示されますLoAF API は仕様上、処理が 50 ms を超えたフレームでしか発火しません。
そのため、高性能な PC で軽いプロパティ（例: transform のみ）を動かしている間は、
実測欄が — のまま表示されることがあります。これは計測失敗ではなく、
「今のフレームは 50 ms に届かないほど軽い」 ことを意味しています。
差を確かめたい場合は、道場モードで要素数を増やすか、
重いプロパティ（width など）を重ねて試してください。
この稽古場はいかがでしたか？