Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Webブラウザでページが表示されるまで
Search
mikiken
May 11, 2023
Technology
80
0
Share
Webブラウザでページが表示されるまで
mikiken
May 11, 2023
More Decks by mikiken
See All by mikiken
ライフゲームの製作
mikiken
0
230
簡単な4bitCPUの作成
mikiken
0
1.3k
Cコンパイラ自作はじめてみた
mikiken
0
260
seccamp2022 成果発表
mikiken
0
45
Other Decks in Technology
See All in Technology
3つのボトルネックを解消し、リリースエンジニアリングを再定義した話
nealle
0
380
チームで育てるAI自走環境_20260409
fuktig
0
1k
システムは「動く」だけでは足りない 実装編 - 非機能要件・分散システム・トレードオフをコードで見る
nwiizo
2
330
New CBs New Challenges
ysuzuki
1
170
"SQLは書けません"から始まる データドリブン
kubell_hr
1
290
Eight Engineering Unit 紹介資料
sansan33
PRO
3
7.2k
AI環境整備はどのくらい開発生産性を変えうるか? #AI駆動開発 #AI自走環境
ucchi0909
0
120
申請待ちゼロへ!AWS × Entra IDで実現した「権限付与」のセルフサービス化
mhrtech
1
280
ログ基盤・プラグイン・ダッシュボード、全部整えた。でも最後は人だった。
makikub
5
1.6k
AIエージェントを構築して感じた、AI時代のCDKとの向き合い方
smt7174
1
180
DIPS2.0データに基づく森林管理における無人航空機の利用状況
naokimuroki
0
200
システムは「動く」だけでは 足りない - 非機能要件・分散システム・トレードオフの基礎
nwiizo
26
8.3k
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
We Are The Robots
honzajavorek
0
210
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
34
2.7k
How STYLIGHT went responsive
nonsquared
100
6k
Designing for humans not robots
tammielis
254
26k
Making Projects Easy
brettharned
120
6.6k
GraphQLの誤解/rethinking-graphql
sonatard
75
12k
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
livdayseo
0
96
Build your cross-platform service in a week with App Engine
jlugia
234
18k
The Language of Interfaces
destraynor
162
26k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
122
21k
Producing Creativity
orderedlist
PRO
348
40k
Transcript
Webブラウザでページが表示されるまで 2023/05/11 三木 健太郎 (@mikikeen)
TCP/IP プロトコルスタックの全体像 • 離れた場所にあるコンピュータ同士を通信させたい • 通信経路の決定から物理的な信号の伝送まで、行うべき処理は多岐にわたる • そこで一連の処理をアプリケーションレベルでの処理~物理的なレベルまで、複数の階層に分離 • 各階層ごとに複数のプロトコルが規定されている
• 各階層のプロトコルが互いに協調して、通信を実現する アプリケーション層 トランスポート層 インターネット層 ネットワーク インターフェース層 Ethernet IPv4 ARP TCP UDP HTTP FTP DNS … IPv6 無線LAN PPP … 信号の物理的な伝送方法を規定 宛先までデータを実際に届ける役割を担う アプリケーションごとに通信を振り分ける 確実なデータ伝送を実現 アプリケーションで扱うデータのフォー マットや処理手順を規定
TCP/IP プロトコルスタックの全体像 • 各階層のプロトコルは、上の階層からのデータを単にバイナリの列とみなす • 上の階層からのデータにヘッダをつけて、下の階層のプロトコルに渡す • 受信時は逆に、ヘッダを除去して上の階層のプロトコルに渡す アプリケーション層 トランスポート層
インターネット層 ネットワーク インターフェース層 アプリケーション層 トランスポート層 インターネット層 ネットワーク インターフェース層
行われる処理 (アプリケーションのレベルで見た場合) 1. ブラウザがURLを解釈 2. DNSサーバにIPアドレスを問い合わせる 3. HTTPリクエストを作成し、プロトコルスタックに送信を依頼する 4. HTTPのレスポンスが返ってくるので、それをもとにブラウザの画面を描画する
ブラウザがURLを解釈する http://www.example.com
ブラウザがURLを解釈する http://www.example.com/ プロトコルの種類 ホスト名 (≒サーバー名) ドメイン名 サーバーのルートディレクトリ (ブラウザが付加) • ドメイン名の後には、本来ファイルパスが続く
• ファイル名が明示されていない場合、サーバー側で返すべきファイルを判断 (.htaccessの内容に基づき判断) • ここではディレクトリも指定されていないが、ブラウザが文脈を判断し、サーバー のルートディレクトリへのアクセスだと判断
DNSサーバーにIPアドレスを問い合わせる • ホスト名+ドメイン名では、アクセスすべきサーバーが分からない • DNS(Domain Name System)を用いて、ホスト名+ドメイン名から、アクセスすべきサーバーの IPアドレス を取得する •
DNSの問い合わせクエリはUDPで伝送される 名前 タイプ 返答内容 www.example.com A (IP アドレス) 93.184.216.34 hoge.example.com MX (メール配送先) 1 mail.example.com mail.example.com A 100.112.143.10 … … … DNSレコードのイメージ
DNSによる名前解決の様子 / (root) com jp 最寄りの DNSサーバ example … …
クライアント
DNSによる名前解決の様子 / (root) com jp 最寄りの DNSサーバ example … …
クライアント
DNSによる名前解決の様子 / (root) com jp 最寄りの DNSサーバ example … …
クライアント
DNSによる名前解決の様子 / (root) com jp 最寄りの DNSサーバ example … …
クライアント
DNSによる名前解決の様子 / (root) com jp 最寄りの DNSサーバ example … …
クライアント
DNSによる名前解決の様子 / (root) com jp 最寄りの DNSサーバ example … …
クライアント
DNSによる名前解決の様子 / (root) com jp 最寄りの DNSサーバ example … …
クライアント
DNSによる名前解決の様子 / (root) com jp 最寄りの DNSサーバ example … …
クライアント
実際のDNSサーバからの応答
HTTPリクエストメッセージを作成 https://www.infraexpert.com/study/tcpip16.html より引用
HTTPリクエストメッセージを作成
HTTPのレスポンスをもとにブラウザの画面を描画 https://www.infraexpert.com/study/tcpip16.html より引用
None
行われる処理 (トランスポート層のレベルで見た場合) 1. プロトコルスタックがソケットを作成する 2. サーバーに接続する 3. データを送受信する 4. 接続を切断し、ソケットを抹消する
プロトコルスタックがソケットを作成する • プロトコルスタックは、通信に必要な制御情報 (宛先IPアドレス、ポート番号、通信の進行状態 )をソケットと いう単位で管理している • クライアント側とサーバー側のソケットを (仮想的に)接続することで、通信を行う •
通常サーバー側は、クライアント側がソケットを繋ぎに来るのを待ち受けている • アプリケーション側でSocket APIを呼び出し、プロトコルスタックにソケット作成を依頼
サーバーに接続する (3Way Hand Shake方式) • クライアントが接続開始を通知するパケットを送信 • そのパケットのTCPヘッダのSYN(synchronize)フラグを1にして、接続開始をサーバー側に通知 • サーバー側は、同様にTCPヘッダのSYNフラグとACK(acknowledge)フラグを1にしたパケットを作成
• 更にシーケンス番号(このパケットの先頭位置のデータが元データの何バイト目かを表す )の初期値と、 ACK番号(これまで何バイト目まで受信したかを表す )、ウィンドウ(受信バッファの大きさ)を通知 • 最後にクライアント側がACK番号を通知 クライアント側 サーバー側
データを送受信する • データの送信側は、シーケンス番号 (このパケットの先頭位置のデータが元データの何バイト目かを表す ) とデータを送信 • 受信側は、ACK番号(これまで何バイト目まで受信したかを表す )、ウィンドウ(受信バッファの大きさ)を送り 返す
• これを相互に繰り返す
接続を切断し、ソケットを抹消する • Webではサーバーがデータを送り終えたら、サーバー側から接続を切断することになっている • サーバー側がTCPヘッダのFINフラグを1にしたパケットを送信 • クライアント側がACK番号を送信し、さらにTCPヘッダのFINフラグを1にしたパケットを送信 • 最後にサーバー側からACK番号が送信されてきて、接続は切断される
行われる処理 (インターネット層のレベルで見た場合) 1. ARPプロトコルを用いて、次にパケットを中継すべきルーターの MACアドレスを通知してもらう 2. IPパケットにMACヘッダを付加し、ネットワークアダプタに実際の送信を依頼
ARPプロトコルで次にパケットを送るべきルーターを探す • ARPプロトコルで、IPのブロードキャストという仕組みを用いて、同じサブネットのホスト全体に宛先の IPア ドレスを通知して、パケットを中継してくれるルーターを見つける • パケットを中継できるルーターは自分の MACアドレスをクライアントに通知する