ウェブはどのように機能するのか

docs.scrimba.com

開くすべてのページは同じ短い旅をたどります。あなたがアドレスでページをリクエストしると、どこかにあるマシンがテキストドキュメントを送り返し、ブラウザがそのテキストをあなたが見るページに変換します。HTMLはそのテキストが書かれている言語なので、それが行う旅を理解することは、このハンドブック内の他のすべての背景です。

クライアントとサーバー

ウェブは二者間の会話です。あなたのブラウザは**クライアントです：ページをリクエストするプログラムです。ウェブサイトを保持してそれを渡すマシンはサーバー**です。あなたがリクエストし、サーバーが答えます。

レストランで注文することを考えてください。あなたは顧客で、キッチンは見えない所にあり、ウェイターがあなたの注文を往復させます。あなたがキッチンに入って料理をすることはありません。あなたは料理を注文し、キッチンはそれを準備して出します。あなたのブラウザが顧客で、サーバーがキッチンで、ウェブはその間を走るウェイターです。

すべてのページロードは、クライアントがサーバーと通話しています。クライアントはほぼ常にブラウザであるリクエストを行うプログラムですが、モバイルアプリやコマンドラインツールにもなります。サーバーはどこかのマシンで実行されているプログラムで、リクエストを待機してレスポンスを送信します。

この関係は最初は一方向です：クライアントが常に最初に話します。サーバーは無からページをあなたにプッシュすることはありません。サーバーはクライアントが何かをリクエストするまで待機し、それからレスポンスします。1つのサーバーが同時に何千ものクライアントに答えるので、単一のウェブサイトが同じアドレスから多くの訪問者にサービスを提供できます。

クライアントとサーバーは役割であり、固定マシンではありません。クライアントはリクエストを開始するもの、サーバーはリクエストをリッスンしてレスポンスを返すものです。同じ物理コンピュータは1つの接続ではサーバーであり、別の接続ではクライアントでもあります。たとえば、データベースを呼び出すウェブサーバーなどです。

このモデルはその中核でリクエスト駆動型でステートレスです。ステートレスとは、サーバーが各リクエストをそれ自体で完全なものとして扱うことを意味します：以前のリクエストについてのことは、デフォルトではサーバーに記憶されません。これは、サインインが後のリクエストで再確立される必要がある理由です。通常はクライアントが毎回送信するクッキーやトークンを使います。接続自体は記憶を持たないからです。プロトコルをステートレスに保つことが、リクエスト間のすべての訪問者に対してオープンなコンテキストスレッドを保持しないため、1つのサーバーが膨大なトラフィックにスケーリングできる理由です。

Junoクライアントとサーバー 二者間の会話：あなたのブラウザはリクエストするクライアントで、サーバーは答えるマシンです。顧客とキッチンの間にウェイターがいるのと同じように、あなたはキッチンに入らず、注文して食事が出てきます。この絵を心に留めておいてください。このページ上の他のすべてはこの一種です。

Junoクライアントとサーバー クライアントがリクエストし、サーバーが答え、クライアントが常に最初に話します。1つのサーバーが同時に多くのクライアントを処理するので、単一のアドレスが大勢の訪問者にサービスを提供する方法です。何かがロードされるとき、あなたはその往復の1ラウンドを見ています。

Junoクライアントとサーバー クライアントとサーバーは役割であり、ボックスではなく、同じマシンが両方の役割を果たせます。ウェブはデフォルトではステートレスなので、サーバーはクライアントが毎回証拠を再送信しない限り、リクエスト間で何も記憶しません。それがクッキーやトークンが行っていることです。そのステートレスさは回避すべき制限ではなく、1つのサーバーが実際のトラフィックに耐えられるようにするものです。

URLとドメイン

入力するアドレスは**URL**：Uniform Resource Locatorです。ウェブ上の1つのもののフルアドレスで、郵送アドレスが1つの家を指すのと同じ方法です。

https://scrimba.com/learnを見てください。httpsの部分はブラウザがサーバーと通信する方法です。scrimba.comの部分はドメインで、ウェブサイトの名前で、街と同じようなものです。/learnの部分は特定のページへのパスで、家番号のようなものです。一緒にそれらは正確に1つのページを指し、それを入力することはブラウザにどこに行くべきかを伝えます。

**URL**は部品でできており、それらに名前を付けることは全体を読みやすくします。https://scrimba.com/learn/htmlを見てください：

• httpsはスキーム：ブラウザがページを取得するために使用するプロトコル。
• scrimba.comはドメイン：サイトの人間が読める名前。
• /learn/htmlはパス：そのサイト上のどのページか。

ドメインは数字のための親切な代替です。すべてのサーバーはIPアドレス（192.0.2.10のような文字列）から到達可能で、ドメイン名はそれを暗記するのを避けるために存在します。ドメインを入力すると、ブラウザはDNS（ドメイン名システム）を通じてそのIPアドレスを検索します。それは名前を数字に変える電話帳のように機能します。

**URL**はブラウザがリソースを見つけるために必要なすべてを符号化し、各セグメントは役割があります。https://shop.example.com:443/products?id=42#reviewsでは：スキームはhttps、shopはサブドメイン、example.comは登録済みドメイン、443はポート、/productsはパス、?id=42はクエリ文字列、#reviewsはフラグメントです。

ポートはサーバー上の番号付きドア（443がHTTPSのデフォルトなので、通常は省略されます）。クエリ文字列はサーバーにパラメータを渡し、それが返すものを変えることができます。フラグメントは#の後は、ブラウザによってのみ処理され、サーバーに送信されることはありません。ページ内の場所を指します。ドメインをIPアドレスに解決することはDNS（ドメイン名システム、ウェブの名前から数字への対応表）を通過し、その検索自体はネットワークのラウンドトリップなので、冷たいDNS解決はユーザーがページの最初のバイトが到達する前に支払う待機時間です。解剖学を知ることは実際的です：それはサーバーが見ることができるもの（パスとクエリ）、見ることができないもの（フラグメント）、そして遅い最初のロードが隠れる場所を教えてくれます。

JunoURLとドメイン URLは1つのページのフルアドレスです。httpsはサーバーと話す方法を示し、scrimba.comのようなドメインはサイトの名前で、/learnのようなパスはそれ上の1つのページを指します。左から右に読むと、ブラウザが向かっている場所を正確に教えてくれます。

JunoURLとドメイン URLはスキーム、ドメイン、パスに分かれ、その部品を見たら、一目でどんなアドレスでも読むことができます。ドメインは数字の親切な名前です：DNSはscrimba.comをブラウザが実際に到達できるIPアドレスに変える電話帳です。その検索はページが読み込まれる前に静かに行われます。

JunoURLとドメイン URLのすべての部分がその場所を獲得します：スキーム、サブドメイン、ドメイン、ポート、パス、クエリ、フラグメント。サーバーはパスとクエリを見ますが、#の後の部分がブラウザに留まるため、フラグメントは見ません。そしてDNS解決は実際のラウンドトリップなので、冷たい検索は最初のバイト前にユーザーが支払う待機時間で、最初のロードが遅く感じるときに覚えておく価値があります。

リクエストとレスポンスのサイクル

Enterキーを押すと、ブラウザはサーバーに**リクエストを送信します。「このページを送ってください」と言う短いメッセージです。サーバーはレスポンス**を送信します：ページ自体です。その往復は1つの完全な旅で、ページを開いたりリンクをクリックするたびに起こります。

図書館司書に本を求めることを考えてください。あなたはタイトルを与え（あなたのリクエスト）、図書館司書はそれを見つけてそれを渡します（レスポンス）、そして今あなたはそれをあなたの手に持っています。その本が存在しないなら、図書館司書はあなたに代わりにそれを伝え、それはまた返信です。ウェブも同じ方法で機能し、はるかに速く、1秒あたり何度も機能します。

ページロードは1つの**リクエストと1つのレスポンスです。ブラウザはそれが望むページと望む方法を名付けるリクエストを送信します。サーバーはリクエストがどのように行われたかを示すステータスコード**とともにページを含むレスポンスを送信します。

あなたが常に見る3つのステータスコードがあります。最初にこれらを学んでください：

• 200 OK：うまくいきました。あなたが求めたものはここにあります。
• 404 Not Found：サーバーは大丈夫ですが、そのアドレスには何もありません。
• 301 Moved Permanently：このページは今どこか他の場所に住んでいて、ブラウザは新しいアドレスに続くべきです。

サーバーが通常のページに対して送信する内容は、ページの写真ではありません。それは、あなたが手で書く同じタグで書かれたプレーンテキストドキュメントです。ブラウザはそのテキストを受け取ってそれからそれを可視ページを構築します。

リクエストとレスポンスサイクルはHTTP（HyperText Transfer Protocol）で定義されます：クライアントとサーバーが彼らのメッセージをどのように構文するかについてのルールの同意されたセット。リクエストはメソッド（動詞：GETを取得する、POSTデータを送信する）、パス、ヘッダー（メタデータの名前と値のペア。たとえば、クライアントが受け入れる形式）を運びます。レスポンスはステータスコード、独自のヘッダー、通常は本体（実際のコンテンツ）を運びます。

ステータスコードは範囲で来ます。そして範囲はあなたに誰を見るべきかを伝えます。2xxは成功です（200 OK）。3xxはリダイレクト（301 Moved Permanentlyはブラウザと検索エンジンにリソースが新しい標準アドレスを持っていることを伝えるので、SEOのために正しく取得する価値があります）。4xxはクライアントエラーで、リクエストが間違っていることを意味します（404 Not Found、403 Forbidden）。5xxはサーバーエラーで、リクエストは大丈夫でしたがサーバーが失敗したことを意味します（500 Internal Server Error）。その区別は実際的です：4xxはあなたをリクエストに指し、5xxはあなたをサーバーに指します。ドキュメントのレスポンス本体はHTMLテキストで、Content-Typeヘッダーはプレーンテキストや画像ではなくHTMLとして扱うようにブラウザに伝えるものです。もう1つ知る価値のある行：HTTPは回線上のすべての読可能なものを送信しますが、HTTPSは同じプロトコルを暗号化で包み、その間のだれも読んだり改ざんしたりできないようにします。それが今日のすべての実在するサイトがHTTPSを使う理由です。

Junoリクエストとレスポンスのサイクル すべてのページは往復：あなたのブラウザはこれを送ってくださいと言うリクエストを送信し、サーバーはページでレスポンスを送信します。図書館司書に本をリクエストして受け取るか、ここに無いと言われるのと同じように。そのラウンドトリップは静かに速くページを開くたびに起こります。

Junoリクエストとレスポンスのサイクル 1つのリクエストが出て、1つのレスポンスが戻ります。ステータスコード付きで。200（うまくいった）、404（そのアドレスには何もない）、301（移動、私に続け）をまず学んでください。あなたが見るほとんどをカバーします。そして、ページに実際に戻されるものは写真ではなくプレーンHTMLテキストで、ブラウザはそれから見えるものを構築することを覚えておいてください。

Junoリクエストとレスポンスのサイクル HTTPは旅の文法です。リクエストはメソッド、パス、ヘッダーを持ち、レスポンスはステータスコード、ヘッダー、本体を持ちます。ステータスコードを範囲で読み、4xxはリクエストを修正することを意味し、5xxはサーバーが倒れたことを意味し、その分割はあなたがどこを見るべきかを伝えます。本体はHTMLテキストでContent-Typeでタグ付けされ、HTTPSはHTTPをそれの周りに暗号化を包んだもので、すべての実在するサイトが今日それを使う理由です。

ブラウザが受信するHTMLで行うこと

レスポンスはページの価値があるHTMLテキストです。ブラウザはそのテキストを上から下に読んで画面上に描きます：見出しタグを見て大きく太いテキストを表示し、段落タグを見て本文の行を表示し、画像タグを見て写真を取得します。

レシピを読んでそれを調理することのようにそれについて考えることができます。テキストは食事ではなく、食事の説明で、ブラウザはそれを実際に見たり使ったりできるものに変える調理人です。同じHTMLは常に同じページを生成します。ブラウザが毎回同じ指令に従うからです。

ブラウザはHTMLテキストを表示しません。それはそれからページを構築します。ドキュメントを上から下に読むとき、それはタグを**DOM**、Document Object Model：メモリに保持されているページの要素の生きた木に変換します。DOMは実際に表示され、CSSとJavaScriptが後で読んで変更するものです。

順序はここで重要です。ブラウザはあなたが書いた順序でドキュメントを読むので、上部の近くにある<script>またはスタイルシートは、その下のコンテンツの前に処理されます。これがページがページに関する情報を<head>に置いて、目に見えるコンテンツを<body>に置く実際的な理由であり、タグを配置する場所がその効果がいつ起こるかに影響する理由です。あなたは単に要素をリストアップしているのではなく、ブラウザに読む順序を渡しています。

HTMLをピクセルに変えることはパイプラインで、その形を知ることはいくつかのページが他のページよりもゆっくり塗られる理由を教えてくれます。ブラウザは解析HTMLテキスト（それを読んで構造を構築する）を**DOM（Document Object Model：すべての要素のメモリ内ツリー）に変えます。CSSを平行線に解析し、2つを組み合わせ、ジオメトリを機能させます（レイアウト：各ボックスがどこに座るか）、最後に画面に描き**ピクセルを描きます。

パーサーが上から下に読むため、配置は時間を変えます。リソースがレンダリングブロックになるとき、ブラウザはそのリソースで完了するまでコンテンツを描きません。<head>のスタイルシートは設計により描画ブロックなので、ページは無装飾でフラッシュしませんが、遅いものは最初の塗装全体を保持します。<head>の古典的な<script>はさらに悪いです：パーサーは停止し、スクリプトをダウンロードして実行し、その後再開するので、ドキュメントの高い位置にあるスクリプトはその下のすべての要素を遅延させます（deferとasync属性はそのブロックを壊すために存在します）。これはドキュメント順序と<head>配置が最初に描く内容を決定する理由です：ブロッキングリソースの上のすべてはそれを待ちます。

それはレーテンシーに接続します。バイトがユーザーに移動するために取る時間で、ローカル速度がいくら取り除くこともできません。すべてのリクエストはラウンドトリップコストを持つので、より少ないリクエストとより小さく、より早いバイトはページが描き始める前により早く意味します。HTMLで制御するレバーは順序です：ユーザーが最初に見る必要があるもの、ブロッキングリソースをその方法から外し、最初の意味のある塗装はより早く到着します。より少ないとより早いバイトはこのレイヤーでの全パフォーマンスゲームです。

Junoブラウザが受信するHTMLで行うこと 戻されるHTMLはページの説明で、ブラウザはそれを本当のものに変える調理人です。上から下に読みます：見出しタグ、大きく太いテキスト、段落タグ、本文、画像タグ、写真を取得します。同じHTMLが、同じページを出し、毎回。

Junoブラウザが受信するHTMLで行うこと ブラウザはあなたのHTMLを上から下に読んでDOMを構築します。生きた要素のツリーで、実際に表示されるものです。それが順序で読むため、タグを配置する場所がそれが影響を起こすときを決定します。それはhead and bodyスプリットの本当の理由です。あなたは単に要素の山ではなく、ブラウザに読む順序を渡しています。

Junoブラウザが受信するHTMLで行うこと DOMに解析し、CSSと組み合わせ、レイアウトし、描く：そのパイプラインは配置が時間を変える理由です。レンダリングブロッキングリソースの上のすべてはそれを待ち、遅いスタイルシートまたはhead内のプレーン<script>は最初の塗装を保持します。それがdeferとasyncのためです。あなたが取り除くことができない待機時間を追加し、動きは常に同じで、より少ないとより早いバイト、ドキュメントで高い最も重要なもの。