News Observation Lab for Future
Enterキーを押してから最初のピクセルが表示されるまでの仕組み
ネットワークの旅：DNS、TCP、TLS
URL を入力して Enter キーを押すと、まずブラウザは接続を確立します。DNS によってドメイン名が IP アドレスに変換され、TCP の三者ハンドシェイクで通信路が作られます。その後 TLS ハンドシェイクが行われ、暗号化された HTTPS 接続が確立します。
HTML の解析と DOM の構築
サーバーから最初の HTML データが届くと、ブラウザは文字列をトークンに分解し、ノードへと変換して DOM ツリーを生成します。<script src="app.js"> のように非同期属性や defer が付いていないスクリプトタグに遭遇すると、HTML の解析はスクリプトのダウンロードと実行が完了するまで停止します。
CSSOM とレンダリングブロッキング
DOM が構築されている間に外部スタイルシートや <style> ブロックが解析され、CSS オブジェクトモデル（CSSOM）が作られます。CSS はカスケーディングの性質上インクリメンタルに処理できないため、CSSOM が完成するまでブラウザは描画を開始せず、レンダリングをブロックします。
レンダーツリーとレイアウト（リフロー）
DOM と CSSOM が統合されてレンダーツリーが生成されます。display:none の要素はツリーから除外され、visibility:hidden の要素は占有領域を残したまま保持されます。続いてレイアウト（リフロー）段階で、各要素の正確な位置・サイズがビューポート基準で計算されます。
ペイントとコンポジティング
レイアウトが終わると、テキストや画像、境界線などが個々のレイヤーに描画されます（ペイント）。最後に GPU がこれらのレイヤーを合成し、画面に表示します。transform や opacity といったプロパティのアニメーションは、レイアウトやペイントを再計算せずにコンポジティングだけで済むため、滑らかな動きを実現できます。
ブラウザ内部の流れを理解することで、技術面接や LCP・CLS といったパフォーマンス指標の改善に役立ちます。本稿はフロントエンドアーキテクチャ全体像を示す 21 フェーズのうち第 1 フェーズにあたります。