ブラウザアクセスから画面表示までの流れ
20251004
ここでは「一般的なWebアプリケーション（例：Google）」をブラウザで開いたときに、どんな流れで画面が表示されるかを大枠で説明します。
🔹 全体の流れ（5つの大きな段階）
① URL入力〜接続準備
1. ユーザーがブラウザに https://www.google.com と入力
2. ブラウザがまずキャッシュ（履歴やDNSキャッシュ）を確認
3. 必要ならDNSサーバーへ問い合わせて、www.google.com のIPアドレスを取得
4. HTTPS通信のためにサーバーへ接続し、TLSハンドシェイクを実施（暗号化の設定・証明書の確認）
👉 この段階ではまだデータは取得しておらず、「どこに」「どうやって」つなぐかを決めています。
② リクエスト送信〜レスポンス受信
5. 接続が確立すると、ブラウザはサーバーにHTTPリクエストを送信
例：
GET / HTTP/1.1 Host: www.google.com User-Agent: Chrome/141.0
6. サーバー（またはCDN）がリクエストを受け取り、適切なコンテンツ（HTMLなど）を返す
7. 返されたレスポンス（HTTPステータス・ヘッダ・HTML本文など）をブラウザが受信
例：
HTTP/1.1 200 OK Content-Type: text/html
👉 この段階で「HTML文書そのもの」が届きます。
③ HTMLの解析とリソース取得
8. ブラウザはHTMLを**パース（解析）**しながら、
<link>・<script>・<img>などの外部リソースを見つけ次第、並行して取得します。
9. CSSを読み込んでスタイル情報（CSSOM）を作り、HTMLからDOMツリーを構築
10. JavaScriptを読み込み・実行して、ページの動的な部分を組み立てます。
👉 ここまでで「ページの構造・見た目・動き」が揃います。
④ レイアウト・描画
11. ブラウザのレンダリングエンジン（例：Blink）が
DOMとCSSOMを組み合わせてレンダーツリーを作成
12. 要素ごとのサイズや位置を計算（レイアウト）し、
それをペイントして画面に描画
13. GPUで**合成（compositing）**され、ユーザーの画面に最終的なページが表示されます。
👉 ここでユーザーが目にする「Googleの検索トップページ」が完成。
⑤ その後の通信と状態管理
14. ページ内のJavaScriptがAPI通信（Ajax / Fetch）を行い、動的に結果を更新
15. Cookie・localStorage・IndexedDBなどに情報を保存
16. 次回アクセス時には、これらのキャッシュやCookieを利用して
ログイン状態や設定を復元します。
🔹 まとめ図（簡略フロー）
code:_
URL入力
↓
DNS解決 → IP取得
↓
TCP/TLS接続
↓
HTTPリクエスト送信
↓
HTTPレスポンス受信（HTML）
↓
HTML解析 → CSS/JS/画像読み込み
↓
DOM＋CSSOM構築
↓
レンダリング → 画面描画
↓
JS実行・API通信・状態保存