出典
このサイトから勉強になった箇所を抜き出しています。図も揃っていてわかりやすいです
ウェブのしくみでは、コンピューターや携帯電話のウェブブラウザーでウェブページを見るときに起こることを簡単に説明します。
この理論は、ウェブのコードを書く上ですぐにでも必要というわけではありませんが、背景で何が起きているのかを理解しておくと、いずれ役に立つでしょう。
Webにおいてクライアント、サーバ以外に必要なもの
インターネットを接続することでデータの送受信をする
インターネット接続: ウェブ上でデータの送受信をできるようにします。あなたの自宅とお店との間の通りのようなものです。
TCP/IPプロトコルは通信手段
TCP/IP: Transmission Control Protocol と Internet Protocol は、どのようにウェブ上をデータが動くのか、を定義した通信プロトコルです。これは注文したり、店に行ったり、物を買ったりするための通信手段や交通機関のようなものです。身近な例では、車やバイク (またはその辺りにあるもの) のようなものです。
ウェブサイトを取得する前にDNSで問い合わせる
DNS: Domain Name System はウェブサイトの住所録のようなものです。ブラウザーにウェブアドレスを入力すると、ブラウザーはウェブサイトを取得する前に DNS を見て、ウェブサイトの IP アドレスを探します。ブラウザーはウェブサイトがどのサーバーにいるかを探し出す必要があり、それで HTTP のメッセージを正しい場所（下記参照）に送ることができます。これはお店の所在地を探してからお店に行くようなものです。
HTTPは対話法を設定する
HTTP: Hypertext Transfer Protocol は、クライアントとサーバーが対話をする方法を定義するアプリケーションプロトコルです。これは商品を注文するための言語のようなものです。
コンポーネントファイルは貰うもの
コンポーネントファイル: ウェブサイトは多くの異なるファイルで構成されます。これはお店で複数の部品を買うようなものです。これらのファイルは主に 2 種類に当てはまります。
コードファイル: ウェブサイトは主に HTML、CSS、JavaScript から作られます。しかし、ちょっと後で他の技術にも出会うことになるでしょう。
資産 (Assets): これは画像、音楽、動画、Word 文書、PDF といったウェブサイトを構成するコード以外のすべての材料の集合的な名前です。
ブラウザがWebページを表示させる手順
DNSサーバへアクセス
- ブラウザーは DNS サーバーにアクセスし、ウェブサイトのあるサーバーの実際のアドレスを探します（お店の住所を見つけます）。
宛先のサーバへHTTPリクエストッセージを送信する
- ブラウザーはサーバーに HTTP リクエストメッセージを送信して、ウェブサイトのコピーをクライアントに送るよう求めます（お店に行ってものを注文します）。このメッセージ、およびクライアントとサーバーの間でやりとりされるその他すべてのデータは、TCP/IP を使用してインターネット経由で送信されます
リクエスト承認されてブラウザへ小分けされたパケットを送信される
- サーバーがクライアントのリクエストを承認すると、サーバーはクライアントに "200 OK" というメッセージを送ります。これは「もちろんそのウェブサイトを見ることができます。どうぞ！」という意味です。そしてウェブサイトのファイルを、データパケットと呼ばれる一連の小さな塊 (chunk) としてブラウザーに送信し始めます（お店は商品を渡し、あなたは自宅に持って帰ります）。
ブラウザがすべてのパケットを受信する
- ブラウザーは小さな塊を完全なウェブページに組み立て、表示します（玄関にものが到着しました — 新しいピカピカのものです、すばらしい！）
受信するファイルの内容の解釈順序
HTMLファイルに含まれるCSS,JavaScirptの構文解析順序がある
ブラウザーがサーバーに HTML ファイルのリクエストを送信するとき、こうした HTML ファイルには
<link>要素が外部の CSS スタイルシートを参照していたり、<script>要素が外部の JavaScript のスクリプトを参照していたりすることがよくあります。ブラウザーがページを読み込むときに、これらのファイルがブラウザーによって構文解析される順序を知ることが重要です。
HTMLファイルの<link>,<script>タグの内容を認識する
ブラウザーはまず HTML ファイルを解釈し、 <link> 要素による外部 CSS スタイルシートへの参照や、 <script> 要素によるスクリプトへの参照を認識するようになります。
<link>,<script>で見つかったファイルをサーバへリクエストする
- ブラウザーは HTML を解釈しながら、
<link>要素から見つかった CSS ファイルと<script>要素から見つかった JavaScript ファイルに対してサーバーにリクエストを送り返し、それらから CSS と JavaScript を解釈します。
HTMLからDOMツリー生成、CSSからCSSOM構造を生成、JSからコンパイルを実行
- ブラウザーは解釈された HTML からメモリー内にある DOM ツリーを生成し、解釈された CSS からメモリー内に CSSOM 構造を生成し、解釈された JavaScript をコンパイルして実行します。
それぞれの言語が実行されてユーザはページを見ることができる
- ブラウザーが DOM ツリーを構築し、 CSSOM ツリーからスタイルを適用して JavaScript を実行すると、ページの視覚表現が画面に描かれ、ユーザーはページの内容を見て、それとの対話を始めることができます。
クライアントからサーバへの通信を効率化するためパケットを小さくする
先に、サーバーからクライアントへデータを送信する形式を説明するために「パケット」という用語を使用しました。これはどういう意味なのでしょうか。基本的に、ウェブ上でデータが送信されるときは、何千もの小さな塊で送信されます。データが小さなパケットで送信されるのには、複数の理由があります。パケットが消滅したり、破損したりすることがありますが、そのようなときに小さな塊を置き換えるのは簡単です。さらに、パケットを様々な経路でルーティングすることで、交換を高速化し、多くの異なるユーザーが同じウェブサイトを同時にダウンロードできるようになります。もし各ウェブサイトが単一の大きな塊として送信された場合、一度にダウンロードできるのは一人のユーザーだけとなり、明らかにウェブはとても効率が悪くなるので、使用してもあまり楽しくなくなるでしょう。