ブラウザでウェブサイトを閲覧するとどうなりますか？

ブラウザでwww.cnn.comと入力すると、舞台裏で何が起こり、情報が画面にどのように表示されますか？

技術的な説明をいただければ幸いです。

ブラウザ：「わかりました。このアドレスをリクエストしているユーザーがいます：www.cnn.com。スラッシュなどはないので、これはメインページの直接リクエストです。また、プロトコルやポートも定義されていません。だから、それはHTTPでポート80に行くと思います...まあ、まず最初に。ちょっとDNS、パル、目を覚まします！このwww.cnn.comはどこに隠れているのですか？ "

DNS：「ちょっと...ちょっと待ってください。ISPサーバーに尋ねます。わかりました。157.166.226.25のように見えます。」

ブラウザ：「OK。あなたの番です。157.166.226.25に電話してください。このHTTPヘッダーを送信してください。メインページの基本構造とコンテンツを要求しているので、他に何を取得すればいいかわかります。あなたがこれを気にするということではないでしょう。」

TCP / IP：「私の番はどういう意味ですか？DNSのためにただそこに戻って仕事をしているだけではありませんか？神様、ここで少し感謝するためには何が必要ですか...」

ブラウザ： ...

TCP / IP：「ええ、ええ...接続しています...ゲートウェイに転送を依頼するだけです。簡単ではないので、そこにあるかなりのリクエストを複数の部分に分割する必要があります。それで最後に到達し、私が手に入れた何千ものパッケージから送り返されるものをすべて組み立てます...ああ、そうです、あなたは気にしません。

一方、CNN本社では、メッセージが最終的にWebサーバーのドアに到達します。

CNN Webサーバー：「Nzhôô！顧客！彼はニュースを望んでいます！フロントページ！どうですか？」

CNNサーバーサイドスクリプトエンジン：「そうです、フロントページ、そうですか？」

CNNデータベースサーバー：「うん！私のために働いてください！どんなコンテンツが必要ですか？」

CNN Server Side Script Engine： "...申し訳ありません。DB、キャッシュにフロントページのコピーがあります。何もコンパイルする必要はありません。顧客に対しても、だから私たちは後で誰と話しているのかを知っています。」

CNNデータベースサーバー：「Yey！」

ユーザーのコンピューターに戻る...

TCP / IP：「大丈夫、ここに返事が来ました。ああ、少年、なぜ私はこれが大きなものになると思うのですか...」

ブラウザ：「うわー、これにはあらゆる種類のJavaScriptコードがあります。画像の束、フォームがいくつかあります。そうです、これにはレンダリングに時間がかかります。それを実現するために。IPシステム、 HTTP経由でi.cdn.turner.comからいくつかのスタイルシートが必要で、ファイル/cnn/.element/css/2.0/common.cssを要求するのを見てみましょう。その後、i.cdn.turner.comでこれらのスクリプトの一部を入手します。これまでのところ6つカウントしています...」

TCP / IP：「画像が表示されます。サーバーのアドレスなどすべてを教えてください。そのファイルをHTTPリクエストでラップします。処理したくありません。」

DNS：「i.cdn.turner.comを確認しています...ちょっと、ちょっとした雑学、実際にcdn.cnn.com.c.footprint.netと呼ばれています。IPは4.23.41.126です」

ブラウザ：「確かに...ちょっと待ってください。処理に数n秒かかります。このスクリプトをすべて理解しようとしています...」

TCP / IP：「ねえ、あなたが要求したCSSがあります。ああ、そして...ええ、これらの追加スクリプトも戻ってきました。」

ブラウザ：「やあ、もっと...なんらかのビデオ広告があります！」

TCP / IP：「ああ、なんて楽しい...」

ブラウザ：「あらゆる種類の画像もあります。そして、このCSSは少し厄介に見えます...そのため、その部分がそこにあり、この行が一番上にある場合...一体どのように適合しますか...いいえ、それを作るためにこれを少し伸ばす必要があります...ああ、しかし、その他のCSSファイルはそのルールをオーバーライドします...さて、これはレンダリングするのが簡単な部分ではありません、それは確かです！」

TCP / IP：「OK、OK、ちょっと気を散らすのをやめてください、まだここでやることがたくさんあります。」

ブラウザー：「ユーザー、ここに小さな進捗レポートがあります。申し訳ありませんが、これには数秒かかることがあります。ロードする要素は140種類あり、これまでのところ16個です。」

1〜2秒後...

TCP / IP：「わかりました。それですべてです。ねえ、聞いて...申し訳ありませんが、以前にあなたにスナップしました、あなたはそこで管理していますか？これは確かにあなたにとってもかなりの負荷のようです。」

ブラウザー：「うん、そうですね、最近はこれらのすべてのWebサイトです。簡単にできるとは限りません。まあ、私は管理します。それが私がここにいる理由です。」

TCP / IP：「最近、私たち全員にとって非常に重いと思います...ああ、DNSの栄光を止めてください！」

ブラウザー：「ユーザー、ウェブサイトの準備ができました-ニュースを入手してください！」

Webの仕組み：HTTPおよびCGIの説明

また、CERNからの素晴らしい説明-Webの母校：Webの仕組み

• ブラウザは、入力したもの（URL）をホスト名とパスに分割します。
• ブラウザは、指定されたホスト名とパスでデータを要求するHTTP要求を形成します。
• ブラウザはDNSルックアップを実行して、ホスト名をIPアドレスに解決します。
• ブラウザは、IPアドレスを介して指定されたコンピューターへのTCP / IP接続を形成します。（この接続は実際には多くのコンピューターで構成され、それぞれが次のコンピューターにデータを渡します。）
• ブラウザはHTTPリクエストを指定されたIPアドレスへの接続に送信します。
• そのコンピューターは、TCP / IP接続からHTTP要求を受信し、Webサーバープログラムに渡します。
• Webサーバーはホスト名とパスを読み取り、要求したデータを検索または生成します。
• Webサーバーは、そのデータを含むHTTP応答を生成します。
• Webサーバーは、そのHTTP応答をマシンへのTCP / IP接続に送り返します。
• ブラウザはHTTP応答を受信し、それをヘッダー（データを記述する）と本文（データ自体）に分割します。
• ブラウザはデータを解釈して、ブラウザでの表示方法を決定します。通常、これは情報のタイプとその一般的な形式を指定するHTMLデータです。
• 一部のデータは、詳細なレイアウトのスタイルシート、インラインイメージ、Flashムービーなど、ロードする必要のあるリソースをさらに指定するメタデータになります。このメタデータはURLとして再度指定され、このプロセス全体が、すべてがロードされるまで各プロセスに対して繰り返されます。

最初のステップは、DNS（ドメインネームサーバー）ルックアップです。ネットワーク設定で指定された（またはDHCPによって指定された）DNSサーバーを使用して、トップドメイン（cnn.com）を検索し、そのドメインのネームサーバーに指定されたサブドメイン（www.cnn.com）のIPアドレスを要求します。

IPアドレスを取得すると、ブラウザはWebサーバーとの通信を開始します。これは、指定されたプロトコル（通常はデフォルトでHTTP 1.1）を使用して行われます。「/」の「GET」リクエストがサーバーに送信され、サーバーはHTMLドキュメントのコンテンツと適切なヘッダー（ブラウザーにドキュメントのコンテンツタイプ、HTML、およびその他の情報を通知します）で応答します。次に、ブラウザはドキュメントを解析し、ページに埋め込む必要があるURL（画像やリンクされたスタイルシートなど）を見つけ、それらのそれぞれに対してGETリクエストを実行します。

また、ブラウザは通常、「/ favicon.ico」のGETリクエストを自動的に作成します（サイトタイトルの横に小さなCNNアイコンを表示します）。

ブラウザは、リクエストヘッダーで、gzipアルゴリズムを使用して、応答コンテンツを圧縮することを指定する可能性があります。これにより、サーバーがサポートしている場合、ファイルのダウンロードがはるかに小さくなります。これは、ZIPファイルをダウンロードして解凍するようなものですが、すべて透過的です。

ページをリロードすると、ブラウザはそのページがすでにシステムにキャッシュされているかどうかを確認し、キャッシュされている場合はドキュメントのヘッダーに対してのみHTTPリクエストを実行し、変更日を確認します。この日付がキャッシュされたコピーより後の場合、ドキュメントの完全なコンテンツを再度要求し、ページを更新します。それ以外の場合は、ローカルコピーのみを使用します。

CNN側で何が起こるかは、他の回答とはかけ離れています。

• CNNのマシンは、コンピューターからページを要求するメッセージを受け取ります。
• このリクエストを、CNNがWebサイトに使用している多くのコンピューターの1つにリダイレクトします（これは、この方法により、応答Webページをまとめる作業を多くのコンピューターに分散できるためです）
• CNNコンピューターはリクエストを取得し、ほぼ完全に事前計算されたWebページで応答しますが、送信する前にいくつかの変更が行われる可能性があります（最上部の広告、ヘッドラインニュースなど）。コンピューターがリクエストを受け取るたびに、多くの小さなコンポーネントからページを組み立てることがあります。CNNが何をするかわからない
• 応答はネットワークを介してコンピューターに到達し、コンピューターに表示されます。
• 応答には画像が含まれていませんでした。コンピューターは画像に対する別の要求を送信し、ほぼ同じシナリオが発生します。

これは明らかに技術的な説明ではありませんが、一部の人に役立つ可能性のあるキュートな視覚補助（優れたVladstudio.comから）です。

ちょうどあなたが尋ねた情報は、数十冊の本を埋めることができました。しかし、これを説明するための私の試みがあります。あなたのブラウザは、OSにcnn.comのIPアドレスを見つけるように伝えます。次に、OSがDNSサーバーにcnn.comのIPアドレスを要求します。IPは、IPアドレスにアクセスしてページを要求するブラウザに送信されます。cnn.comはあなたとhtmlページを送信します。ブラウザはhtmlを解析し、情報をHTMLレンダラーに送信します。ブラウザは、画面に何を表示するかをOSに伝えます。

Jeff Moserは、彼のブログでHTTPS要求の優れた技術分析を行いました：HTTPS接続の最初の数ミリ秒。

「Sendung mit der Maus」（子供向けの技術を説明する非常に人気のあるドイツの子供向けテレビ番組）による非常にクールなビデオがあります。

Die Sendung mit der Maus-インターネットの機能 （インターネットの仕組み）。

残念ながらドイツ語のみですが、テキストがなくても面白いです。面白いヘルメットをかぶった男性がIPパケットを再生し、データが紙のカードに書き込まれます。クラシック:-)。

ところで、説明は実際にはかなり良いです。