レンダリングパイプライン、メモリ、イベントループ — 中級フロントエンドがぶつかる鬼門を、実際の計測値を眺めながら 自分の手で動かして理解するためのラボです。
FIG. 01 — Simulated readout (Lab 01 preview)REF: LoAF · CSS TRIGGERS
毎日触っているはずなのに、フレームの中で何が走っているかは見えないまま。 このラボでは、ブラウザの内部を計測器付きの稽古場で一度分解して、手元で開けてみる経験を用意しました。
ブラウザ内部の挙動は、言葉で説明されるほど掴みにくい。このラボは DOM とプロパティを操作しながら学ぶ設計になっています。
LoAF API でフレーム時間を実測し、CSS Triggers データで理論上の影響を並置する。勘ではなく数字で判断する力を育てます。
サイト内で概念を掴んだあと、同じ計測を Chrome DevTools 上で再現する手順まで案内します。座学で終わらせません。
以下は 1 つの Lab（目安 60〜120 分）を通したときに得られるスキル・感覚です。 個別の Lab ページに詳しい習得目標と所要時間があります。
Layout / Paint / Composite の違い、Style 再計算がどこで走るか、Jank の発生点 — 座学では届かない層を手触りで掴める。
「なんとなく遅い」ではなく「Style+Layout が 28ms 掛かった」と言える語彙を獲得。DevTools で同じことが読めるようになる。
トグル ON/OFF で即座に計測値が動く Lab。数分単位で仮説→検証のループを何周も回せる。
ブラウザが1フレームをどう描くかを、実DOMを操作しながら体験する。Layout / Paint / Composite の差を触って理解する。
Timer / Listener / Detached DOM / Closure の 4 種類のリークを意図的に再現し、performance.memory の階段状の増加を観察する稽古場。
親の state 更新がコンポーネントツリーをどう伝播するかを可視化し、memo / 参照安定性 / Context / 派生 state の罠を手元で検出する稽古場。
microtask / macrotask / rAF / rIC の実行順序を予想 → 実測で検証する稽古場。
z-index 9999 が効かない現象を、新スタッキング文脈の生成条件トグルで歩いて掴む稽古場。
Request Memo / Data / Full Route / Router の 4 層キャッシュを一気通貫で光らせる稽古場。
ステップを追って操作・計測値の見方を身につける。読みながら触る。
スライダーとトグルで自由に値を揺らし、仮説を立てて検証する。
同じ事象を Chrome DevTools の Performance パネルで再現する手引き付き。