狠狠撸

狠狠撸Share a Scribd company logo

アドレスバーにURL打ち込んでからページが表示されるまでに 何が起こっているか

?Download as PPTX, PDF?
?
彰 村地
彰 村地

2018/10/28 開催「HTML5 4th Anniversary」での登壇のセッション スライドです。内容はタイトルの通りブラウザーのアドレスバーにURL打ち込んでからページが表示されるまでに 何が起こっているかを解説しています

1 of 42
アドレスバーにURL打ち込んで からページが表示されるまでに 何が起こっているか Murachi Akira aka hebikuzure 28 Oct. 2018 ?Murachi Akira aka hebikuzure 1
About me ? Murachi Akira aka hebikuzure ? CPS Corporation, Ltd. President, Educational Specialist ? Exceed One Co., Ltd. Business Enhancement Unit (Partner) ? Trainocate Japan, Ltd. Technical Educational Specialist (Partner) ? Microsoft MVP (Most Valuable Professional) ? Since Apr. 2011 ? Award Category: Windows and Device for IT 28 Oct. 2018 ?Murachi Akira aka hebikuzure 2
28 Oct. 2018 ?Murachi Akira aka hebikuzure 3
28 Oct. 2018 ?Murachi Akira aka hebikuzure 4
28 Oct. 2018 ?Murachi Akira aka hebikuzure 5 アドレスバーにURL打ち込んでか らページが表示されるまでに 何が 起こっているか説明してください URL のサーバーにリクエストが送 信され、サーバーからレスポンス が返ってきたらそれを表示します …………..
28 Oct. 2018 ?Murachi Akira aka hebikuzure 6
おことわり ? 本セッションでは「アドレスバーにURL打ち込んでからページ が表示されるまでに 何が起こっているか」についての一般的な 動作の解説を行いますが、すべての環境におけるすべての動作 を網羅的に示すものではありません ? オペレーティングシステムやブラウザー、ネットワーク、サー バー環境によっては本セッションでの説明と異なる動作を行う 場合があります ? 解説は Windows 上でブラウザーを利用した場合を想定して 行っています 28 Oct. 2018 ?Murachi Akira aka hebikuzure 7
ざっくりとした流れ 1. アドレスバーへの入力 2. ブラウザー内での処理 3. ネットワーク コンポーネント（ソケット?TCP/IP）内の処理 4. ネットワーク経路（物理ネットワーク）での伝送 5. サーバー側の処理 6. ネットワーク経路（物理ネットワーク）での伝送 7. ネットワーク コンポーネント（ソケット?TCP/IP）内の処理 8. ブラウザー内での処理 9. ページの表示 28 Oct. 2018 ?Murachi Akira aka hebikuzure 8
ざっくりとした流れ 1. アドレスバーへの入力 2. ブラウザー内での処理 3. ネットワーク コンポーネント（ソケット?TCP/IP）内の処理 4. ネットワーク経路（物理ネットワーク）での伝送 5. サーバー側の処理 6. ネットワーク経路（物理ネットワーク）での伝送 7. ネットワーク コンポーネント（ソケット?TCP/IP）内の処理 8. ブラウザー内での処理 9. ページの表示 28 Oct. 2018 ?Murachi Akira aka hebikuzure 9
アドレスバーへの入力 ? ユーザーが手入力やコピペで文字列をアドレスバーに入力する 28 Oct. 2018 ?Murachi Akira aka hebikuzure 10
ざっくりとした流れ 1. アドレスバーへの入力 2. ブラウザー内での処理 3. ネットワーク コンポーネント（ソケット?TCP/IP）内の処理 4. ネットワーク経路（物理ネットワーク）での伝送 5. サーバー側の処理 6. ネットワーク経路（物理ネットワーク）での伝送 7. ネットワーク コンポーネント（ソケット?TCP/IP）内の処理 8. ブラウザー内での処理 9. ページの表示 28 Oct. 2018 ?Murachi Akira aka hebikuzure 11
ブラウザー内での処理（行き） ? 入力された文字列の解析 ? HTTP / HTTPS / file / about / chrome…… ? 解析結果に基づく適切なモジュールの呼び出し ? URL でなければ Web 検索を実行するブラウザーが一般的 ? (インターネット URL だった場合) インターネット モジュール の呼び出し ? (HTTPS だった場合) 暗号処理モジュールの呼び出し ※ブラウザーによってはインターネット モジュールや暗号処理モジュールまでブラウザー 内に含まれています 28 Oct. 2018 ?Murachi Akira aka hebikuzure 12
入力された文字列の解析 URL なのか？ スキームは何か？ インターネット モ ジュールを呼び出し 28 Oct. 2018 ?Murachi Akira aka hebikuzure 13 URL でなければ Web 検索 about: / file: / …etc. HTTPS なら暗号モ ジュールも呼び出し
インターネット モジュールの処理（行き） ? オリジン サーバーにリクエストするか、キャッシュを読み出す かの判断 ? キャッシュに存在するか？ キャッシュにあるデーターは有効か？ ? (オリジン サーバーにリクエストする場合) HTTP リクエストを 生成してネットワーク コンポーネント (ソケット) を呼び出し ? (キャッシュを読み出す場合) キャッシュ ファイルから必要なコ ンテンツを読み出してブラウザーに返す ? (HTTPS だった場合) 暗号処理モジュールと協調して暗号化処理 28 Oct. 2018 ?Murachi Akira aka hebikuzure 14
キャッシュを使うか？ キャッシュが 存在するか？ キャッシュが 有効か？ キャッシュから 読み出し 28 Oct. 2018 ?Murachi Akira aka hebikuzure 15 オリジンサーバーに リクエスト オリジンサーバーに リクエスト ブラウザーに 返却
ざっくりとした流れ 1. アドレスバーへの入力 2. ブラウザー内での処理 3. ネットワーク コンポーネント（ソケット?TCP/IP）内の処理 4. ネットワーク経路（物理ネットワーク）での伝送 5. サーバー側の処理 6. ネットワーク経路（物理ネットワーク）での伝送 7. ネットワーク コンポーネント（ソケット?TCP/IP）内の処理 8. ブラウザー内での処理 9. ページの表示 28 Oct. 2018 ?Murachi Akira aka hebikuzure 16
28 Oct. 2018 ?Murachi Akira aka hebikuzure 17 物理層 データリンク層 ネットワーク層 トランスポート層 セッション層 プレゼンテーション層 アプリケーション層 10Base/100Base.etc Ethernet IP TCP Socket HTTP 10Base/100Base.etc Ethernet IP TCP セッション層 HTTPS SSL / TLS
28 Oct. 2018 ?Murachi Akira aka hebikuzure 18 10Base/100Base.etc Ethernet IP TCP Socket HTTP 10Base/100Base.etc Ethernet IP TCP Socket HTTP クライアント サーバー ① ② ③ ④
ネットワーク コンポーネントの処理（行き） ? URL から FQDN の解析 ? https://www.cpscorp.jp:8080/main/index.html ? 名前解決 (DNS クエリ) による相手先 IP アドレスの取得 ? www.cpscorp.jp → 13.112.187.226 ? TCP 3way handshake でオリジン サーバーと接続 ? SYN → SYN+ACK → ACK ? (HTTPS の場合) TLS handshake でサーバーとセキュアに接続 ? Client Hello → Server Hello …… ? HTTP リクエストを TCP セグメント → IP パケットとして送信 28 Oct. 2018 ?Murachi Akira aka hebikuzure 19
FQDN の解析 28 Oct. 2018 ?Murachi Akira aka hebikuzure 20 https://www.cpscorp.jp:8080/main/index.html https://www.cpscorp.jp:8080/main/index.html www.cpscorp.jp
名前解決 28 Oct. 2018 ?Murachi Akira aka hebikuzure 21 www.cpscorp.jp 13.112.187.226
IP パケットの組み立て 28 Oct. 2018 ?Murachi Akira aka hebikuzure 22 HTTP データ HTTP データ HTTP データ HTTP データ TCP ヘッダー TCP ヘッダー TCP ヘッダー IPヘッダー TCP ヘッダー Ehernet ヘッダー
TCP 3way handshake 28 Oct. 2018 ?Murachi Akira aka hebikuzure 23 client Server SYN SYN+ACK ACK
TLS handshake 28 Oct. 2018 ?Murachi Akira aka hebikuzure 24 client Server client hello server hello client key info client finished server finished
ざっくりとした流れ 1. アドレスバーへの入力 2. ブラウザー内での処理 3. ネットワーク コンポーネント（ソケット?TCP/IP）内の処理 4. ネットワーク経路（物理ネットワーク）での伝送 5. サーバー側の処理 6. ネットワーク経路（物理ネットワーク）での伝送 7. ネットワーク コンポーネント（ソケット?TCP/IP）内の処理 8. ブラウザー内での処理 9. ページの表示 28 Oct. 2018 ?Murachi Akira aka hebikuzure 25
ネットワーク経路の処理（行き） ? クライアントの NIC (ネットワーク ドライバー+NIC ハードウエ ア) は受け取った IPパケットを Ethernetフレームとして送出 ? Ethernet フレームはルーティングにより相手先サーバーの NIC まで届けられる 28 Oct. 2018 ?Murachi Akira aka hebikuzure 26
ルーティング 28 Oct. 2018 ?Murachi Akira aka hebikuzure 27 IP ヘッダーを見て次の ホップ（ルーター）に フォワードされる
ざっくりとした流れ 1. アドレスバーへの入力 2. ブラウザー内での処理 3. ネットワーク コンポーネント（ソケット?TCP/IP）内の処理 4. ネットワーク経路（物理ネットワーク）での伝送 5. サーバー側の処理 6. ネットワーク経路（物理ネットワーク）での伝送 7. ネットワーク コンポーネント（ソケット?TCP/IP）内の処理 8. ブラウザー内での処理 9. ページの表示 28 Oct. 2018 ?Murachi Akira aka hebikuzure 28
サーバー側の処理 ? NIC に届いた Ethernet フレームをネットワーク コンポーネン トで処理して TCP エンティティ (HTTP リクエスト) を取り出し、 指定されたポート番号の Web サーバーに渡す ? Web サーバーは受け取った HTTP リクエストを解析 ? GET であれば指定されたリソースを読み出す ? アドレスバー入力であれば必ず GET メソッドでリクエストされる ? 問題 (不正な HTTP リクエスト/リソース読み出しの失敗) があ れば HTTP エラー レスポンスを生成、そうでなければ読み出し たリソースから HTTP レスポンスを生成 ? 生成した HTTP レスポンスをクライアントに送出 28 Oct. 2018 ?Murachi Akira aka hebikuzure 29
Web サーバーの処理 HTTP リクエストの解析 リソースの呼び出し HTTP レスポンスの生成 HTTP レスポンスの送出 28 Oct. 2018 ?Murachi Akira aka hebikuzure 30 GET / POST / パラメータ ファイル / CGI / Webコンテナ HTTP ヘッダーの生成
ざっくりとした流れ 1. アドレスバーへの入力 2. ブラウザー内での処理 3. ネットワーク コンポーネント（ソケット?TCP/IP）内の処理 4. ネットワーク経路（物理ネットワーク）での伝送 5. サーバー側の処理 6. ネットワーク経路（物理ネットワーク）での伝送 7. ネットワーク コンポーネント（ソケット?TCP/IP）内の処理 8. ブラウザー内での処理 9. ページの表示 28 Oct. 2018 ?Murachi Akira aka hebikuzure 31
ネットワーク経路での伝送（帰り） ? サーバーの NIC (ネットワーク ドライバー+NIC ハードウエア) は受け取った IPパケットを Ethernetフレームとして送出 ? Ethernet フレームはルーティングにより送信元クライアントの NIC まで届けられる 28 Oct. 2018 ?Murachi Akira aka hebikuzure 32
ルーティング 28 Oct. 2018 ?Murachi Akira aka hebikuzure 33
ざっくりとした流れ 1. アドレスバーへの入力 2. ブラウザー内での処理 3. ネットワーク コンポーネント（ソケット?TCP/IP）内の処理 4. ネットワーク経路（物理ネットワーク）での伝送 5. サーバー側の処理 6. ネットワーク経路（物理ネットワーク）での伝送 7. ネットワーク コンポーネント（ソケット?TCP/IP）内の処理 8. ブラウザー内での処理 9. ページの表示 28 Oct. 2018 ?Murachi Akira aka hebikuzure 34
ネットワーク コンポーネントの処理（帰り） ? NIC に届いた Ethernet フレームをネットワーク コンポーネン トで処理して TCP エンティティ (HTTP レスポンス) を取り出し、 宛先ポート番号で待ち受けているブラウザーに渡す 28 Oct. 2018 ?Murachi Akira aka hebikuzure 35
HTTP データの取り出し 28 Oct. 2018 ?Murachi Akira aka hebikuzure 36 HTTP データ HTTP データ HTTP データ HTTP データ TCP ヘッダー TCP ヘッダー TCP ヘッダー IPヘッダー TCP ヘッダー Ehernet ヘッダー
ざっくりとした流れ 1. アドレスバーへの入力 2. ブラウザー内での処理 3. ネットワーク コンポーネント（ソケット?TCP/IP）内の処理 4. ネットワーク経路（物理ネットワーク）での伝送 5. サーバー側の処理 6. ネットワーク経路（物理ネットワーク）での伝送 7. ネットワーク コンポーネント（ソケット?TCP/IP）内の処理 8. ブラウザー内での処理 9. ページの表示 28 Oct. 2018 ?Murachi Akira aka hebikuzure 37
インターネット モジュールの処理（帰り） ? (HTTPS だった場合) 暗号処理モジュールと協調して復号処理 ? HTTP レスポンス ヘッダーの解析 ? 解析結果に従って必要であればキャッシュに書き込み ? HTTP レスポンスをブラウザーに渡す 28 Oct. 2018 ?Murachi Akira aka hebikuzure 38
ブラウザー内での処理（帰り） ? HTTP レスポンスを解析して、ファイルの種類に応じた処理を 呼び出す ? HTML / CSS / JS / JPEG / PNG / JSON ….. ? (レスポンスの中身が HTML なら) HTML の構文解析 ? JavaScript があれば JS エンジンの呼び出し ? CSS があれば CSS の解析 ? DOM ツリーの生成 ? レンダリング エンジンの呼び出し ? ブラウザー ウィンドウ内の描画 28 Oct. 2018 ?Murachi Akira aka hebikuzure 39
ざっくりとした流れ 1. アドレスバーへの入力 2. ブラウザー内での処理 3. ネットワーク コンポーネント（ソケット?TCP/IP）内の処理 4. ネットワーク経路（物理ネットワーク）での伝送 5. サーバー側の処理 6. ネットワーク経路（物理ネットワーク）での伝送 7. ネットワーク コンポーネント（ソケット?TCP/IP）内の処理 8. ブラウザー内での処理 9. ページの表示 28 Oct. 2018 ?Murachi Akira aka hebikuzure 40
ページの表示 28 Oct. 2018 ?Murachi Akira aka hebikuzure 41
Any question? Thank you! 28 Oct. 2018 ?Murachi Akira aka hebikuzure 42

More Related Content

アドレスバーにURL打ち込んでからページが表示されるまでに 何が起こっているか