ブラウザの仕組み — 設計図を受け取って画面を組み立てる

ブラウザは複数のエンジンの集合体です。

• レンダリングエンジン — HTML／CSSを解析して画面を描く
• JSエンジン — JavaScriptを実行する（DOMを操作する）
• ネットワーク／ストレージ — 通信、Cookie・キャッシュ・localStorage の管理
• サンドボックス — タブやサイトを隔離し、悪意あるコードの影響を閉じ込める

登場人物メモ:

• ※1 DOM／CSSOM — HTML／CSSから作られる木構造
• ※2 レンダーツリー — 実際に描くべき要素の木（表示されない要素は除く）

1. パース — HTMLから DOM、CSSから CSSOM を作る
2. レンダーツリー — 両者を合わせ、描くべきものを決める
3. レイアウト — 各要素の位置・大きさを計算する
4. ペイント／合成 — ピクセルに変換し、レイヤーを重ねて表示する
5. JSが DOM を書き換えると、必要な範囲で リフロー（再計算）／リペイント（再描画） が走る
6. JS実行と描画は 単一のメインスレッド を奪い合う（イベントループ）。重いJSが走っている間は描画も入力も止まる＝画面が固まる

• 同一オリジンポリシー（SOP） — 別オリジンのデータに勝手に触れないよう制限する基本ルール
• CORS — 正当に跨ぐときの、サーバ側の許可の仕組み
• CSP（Content-Security-Policy） — SOP／CORSと並ぶ境界。読み込んでよいスクリプトの出所を制限し、不正なスクリプト実行を防ぐ
• 保存領域 — Cookie（サーバに自動送信）／localStorage（手元だけ）の使い分け
• 開発者ツール — 描画・通信・パフォーマンスを観察できる

• リフロー多発で重い — レイアウトを何度も再計算させている（まとめて変更する）
• JSのブロッキング — 重いJSが描画を止める（分割・遅延読み込み）
• CORSエラー — サーバの許可設定が無く、別オリジンAPIが弾かれる
• CLS（表示中のガタつき） — 画像や広告の領域を先に確保していない