# [備忘録]URLを叩いてから画面に表示されるまで

Posted at 2024-12-27

これまで漠然とした理解で開発をしてきたため、最低限の事は言語化できるくらいにはなりたいなと思い、完全自分用の学習備忘録として残します。

例えば、https://twitter.com/login というURLを叩く。

プロトコルはパソコンとサーバーが安全に通信するためのルール。httpsのsはsecureのs を指す。他のもので例えるならば、「サッカーする時は手を使ってはいけない。」というルールがあると同じように、webの世界にも外部と通信するときにルールがある。

http : 通信内容が暗号化されていない
- 通信が暗号化されていないため、送信内容（例: クレジットカード情報）が第三者に盗み見られたり改ざんされる可能性がある。
https : 通信が暗号化されている
- 通信が暗号化されており、送信内容（例: クレジットカード情報）が安全にサーバーへ送られるため、盗み見や改ざんのリスクがない。

ブラウザはまず、キャッシュにドメインに対応するIPアドレスが保存されていないかを確認する。

キャッシュにhttps://twitter.com/loginのドメインtwitter.comに対応するIPアドレスが保存されているかを確認する。もしキャッシュにIPアドレスがあれば、DNSへの問い合わせをスキップし、それを使ってサーバーに直接リクエストを送る。

キャッシュにIPアドレスがない場合、ブラウザはDNSサーバーに問い合わせを行い、ドメインと対応するIPアドレスを取得する。

ブラウザは取得したIPアドレスを使用して、ターゲットのWebサーバー（ここではTwitter社のサーバー）に接続する。

サーバーのポート番号:
- Twitterのサーバーは、HTTPS通信を受け付けるためにポート443を使う。
- 通常、HTTPS通信はポート443を使うため、ブラウザはサーバーに対してポート443で接続する。
ローカルポート番号:
- ブラウザは、ローカルマシン上で一時的に使用するポート番号を割り当てる。これを「エフェメラルポート」と呼ぶ。
- 例えば、ブラウザがhttps://twitter.com/loginにアクセスするとき、ローカルマシンのポート番号12345を割り当てて、サーバーのポート443に接続する。
通信の流れ:
- ブラウザは、サーバー（Twitter）のIPアドレスとポート443に接続する。
- 同時に、ローカルマシンのポート12345を使用してリクエストを送信する。
- サーバーからのレスポンスは、ポート443を通じて送信され、ローカルマシンのポート12345に戻る。

通信が確立されると、ブラウザはHTTPリクエストをサーバーに送信する。リクエストの内容は以下。

Twitter社が持つ複数のサーバーのうち、一つだけにアクセスが集中しないよう、それぞれのサーバーにアクセスを振り分け、負荷を分散させる。

サーバーはリクエストを処理し、HTTPレスポンスをブラウザに返す。レスポンスの内容は以下。

ブラウザは受け取ったHTMLやCSS、JavaScriptを解析し、ページを表示する。

　1. HTMLファイルをダウンロード

　2. CSSファイルをダウンロード

　3. Javascriptを実行（React, Vueフレームワークなど）

　4. レンダリングしたものをペインティングで画面に描画。