ブラウザに www.cnn.com と入力すると、舞台裏で何が起こり、情報はどのように画面に表示されるのでしょうか?
技術的な説明をいただければ幸いです。
答え1
ブラウザ：「わかりました。このアドレスを要求しているユーザーがいます: www.cnn.com。スラッシュも何もないので、これはメイン ページへの直接要求だと思います。プロトコルやポートも定義されていないので、HTTP でポート 80 に送信されるものと想定します... まあ、まずは。おい DNS、目を覚ませ! この www.cnn.com はどこに隠れているんだ?」
ドメイン名:「そうですね...ちょっと待ってください。ISP サーバーに問い合わせます。157.166.226.25 のようです。」
ブラウザ：「OK。インターネット プロトコル スイート、あなたの番です! 157.166.226.25 に電話してください。この HTTP ヘッダーを送信してください。メイン ページの基本構造とコンテンツを要求しているので、他に何を取得すればよいかがわかります... まあ、あなたがこれを気にすることはないと思いますが。」
プロトコル:"どういう意味私の番? DNS のために一生懸命働いていたわけじゃないのに? ああ、ここで少しでも評価してもらうには、何が必要なんだろう..."
ブラウザ：...
プロトコル:「ああ、ああ…接続中…ゲートウェイに転送を依頼するだけ。ほら、そんなに簡単じゃないんだ。君の素敵なリクエストを複数の部分に分割して最後まで届け、受け取った何千ものパッケージから返送されたものをまとめる必要があるし…ああ、そうだね、君は気にしないんだね。そうか。」
一方、CNN 本社では、ついにメッセージが Web サーバーのドアに届きました。
CNN ウェブサーバー:「ンジョウ！ お客さんです！ ニュースが欲しいんです！ 一面記事です！ どうですか？」
CNN サーバーサイド スクリプト エンジン:「そう、いいよ！一面だよね？」
CNN データベース サーバー:「やったー！僕のために働いてくれ！どんなコンテンツが必要？」
CNN サーバーサイド スクリプト エンジン:「... えーと、DB さん、申し訳ありません。フロントページのコピーはキャッシュに保存してありますので、コンパイルする必要はありません。でも、このユーザー ID を取得して保存してください。顧客にも送信しますので、後で誰と話しているのかがわかります。」
CNN データベース サーバー:「やったー！」
ユーザーのコンピュータに戻ります...
プロトコル:「よし、返事が来た。ああ、これはすごいことになりそうな予感がする…」
ブラウザ：「うわあ、すごい... これにはあらゆる種類の JavaScript コードがあります... たくさんの画像、いくつかのフォーム... そうですね、レンダリングにはしばらく時間がかかります。 さっさとやっておきましょう。 やあ、IP システム、取得する必要があるものがまだたくさんあります。 そうですね、i.cdn.turner.com からいくつかのスタイルシートが必要です - HTTP 経由で、/cnn/.element/css/2.0/common.css ファイルを要求します。 それから、i.cdn.turner.com からそれらのスクリプトもいくつか取得します。 これまでに 6 つ数えました...」
プロトコル:「状況は分かりました。サーバーのアドレスなどを教えてください。そして、そのファイルの内容を HTTP リクエスト内にラップしてください。私はそれに対処したくありません。」
ドメイン名:「i.cdn.turner.com をチェックしています... ちょっと豆知識ですが、実際は cdn.cnn.com.c.footprint.net という名前です。IP は 4.23.41.126 です」
ブラウザ：「はい、はい...ちょっと待ってください、処理には数ナノ秒かかります。このスクリプト全体を理解しようとしているんです...」
プロトコル:「こんにちは、あなたが頼んだ CSS がここにあります。ああ、そうそう、追加のスクリプトも戻ってきました。」
ブラウザ：「ふう、まだあるよ...ビデオ広告みたいなもの！」
プロトコル:「ああ、それは楽しそうだな...」
ブラウザ：「画像もいろいろあります！この CSS はちょっと見苦しいですね... そうだね、この部分がここにあって、上部にこの線があるとしたら... いったいどうやって収まるんだろう... いや、これを少し伸ばさないと収まらない... ああ、でも他の CSS ファイルはそのルールを上書きするんだ... まあ、これはレンダリングが簡単じゃないだろうね、それは確かだ！」
プロトコル:「わかった、わかった、ちょっと邪魔するのはやめてくれ、まだやるべきことがたくさんあるんだ。」
ブラウザ：「ユーザーさん、ちょっとした進捗報告です。申し訳ありませんが、これには数秒かかるかもしれません。読み込む要素が 140 個ほどあり、今のところ 16 個です。」
1、2秒後…
プロトコル:「よし、これで全部だ。なあ、聞いてくれ...さっきは怒鳴ってごめん、大丈夫か？君にとってもこれはかなりの負担みたいだな。」
ブラウザ：「ふう、そうですね、最近はウェブサイトがたくさんあるので、簡単にはいかないですね。まあ、なんとかします。それが私の仕事ですから。」
プロトコル:「最近はみんなにとってかなり負担が大きいみたいですね...あ、DNS さん、自慢するのはやめてください!」
ブラウザ：「ユーザーの皆さん！ウェブサイトの準備ができました。ニュースを入手してください！」
答え2
答え3
- ブラウザは、入力した内容 (URL) をホスト名とパスに分割します。
- ブラウザは、指定されたホスト名とパスにあるデータを要求するために HTTP リクエストを形成します。
- ブラウザは DNS ルックアップを実行して、ホスト名を IP アドレスに解決します。
- ブラウザは、IP アドレスで指定されたコンピュータへの TCP/IP 接続を形成します (この接続は実際には多数のコンピュータから形成され、各コンピュータがデータを次のコンピュータに渡します)。
- ブラウザは指定された IP アドレスへの接続を通じて HTTP リクエストを送信します。
- そのコンピューターは、TCP/IP 接続から HTTP 要求を受信し、それを Web サーバー プログラムに渡します。
- Web サーバーはホスト名とパスを読み取り、要求されたデータを検索または生成します。
- Web サーバーはそのデータを含む HTTP 応答を生成します。
- Web サーバーは、その HTTP 応答を TCP/IP 接続経由でユーザーのマシンに送り返します。
- ブラウザは HTTP 応答を受信し、それをヘッダー (データの説明) と本文 (データ自体) に分割します。
- ブラウザはデータを解釈して、ブラウザでの表示方法を決定します。通常、これは情報の種類とその一般的な形式を指定する HTML データです。
- データの一部は、詳細なレイアウトのスタイルシート、インライン画像、Flash ムービーなど、読み込む必要のある追加のリソースを指定するメタデータです。このメタデータは URL として再度指定され、すべてが読み込まれるまでこのプロセス全体がそれぞれに対して繰り返されます。
答え4
これまでのところ、他の回答では CNN 側で何が起こっているのかが明らかにされていません。
- CNN のマシンが、ページを要求するメッセージをコンピュータから受信します。
- このリクエストは、CNN が Web サイトに使用している多数のコンピューターの 1 つにリダイレクトされます (この方法は、応答 Web ページをまとめる作業を多数のコンピューターに分散できるためです)。
- CNN のコンピューターはリクエストを受け取り、ほぼ完全に事前に計算された Web ページで応答しますが、送信前にいくつかの変更が行われる可能性があります (上部の広告やヘッドライン ニュースなど)。コンピューターはリクエストを受け取るたびに、多数の小さなコンポーネントからページを組み立てることがあります。CNN が何をしているかはわかりません。
- 応答はネットワークを介してコンピュータに送信され、コンピュータに表示されます。
- 応答に画像が含まれていなかった場合、コンピューターは画像を求める別の要求を送信し、ほぼ同じシナリオが発生します。