ネットワーク編 第8章 / 全8章
ページが表示される
HTTPレスポンス ・ レンダリング
200 OK注文した料理が、来た道を通ってテーブルに届く。
図とさわれるデモで確かめる →
ポイント
- 返事は、来たときと同じ道を逆にたどって戻ってくる
- ブラウザが受け取った部品を組み立てて、画面にする
- 画像などは、このあと追加で取りに行く
名前の由来
render形にして差し出す・仕上げる
ブラウザが部品から画面を「仕上げて差し出す」ので、この処理をレンダリングと呼ぶ。
仕事の現場では
ページが重い原因の多くは、大きすぎる画像など「あとから取りに行く部品」。画像を圧縮するだけで体感速度が大きく変わることもあります。
くわしく（正確な話）
- 成功した返事にはステータスコード200が付く。
- HTMLを読んだあと、CSS・JavaScript・画像を追加でリクエストする。
- TCP接続は使い回される（Keep-Alive、HTTP/2では多重化）。
- ブラウザが画面を組み立てる処理をレンダリングと呼ぶ。
この章の用語（意味と語源）
- レンダリング Rendering
受け取った部品から、画面を組み立てて描くこと。
語源render（形にして差し出す・仕上げる）。
- HTML エイチティーエムエル
Webページの骨組みを書く言語。
語源HyperText Markup Language の頭文字。markup は、原稿に「ここは見出し」と書き込む印（校正記号）のこと。
- CSS シーエスエス
Webページの見た目（色・大きさ・配置）を決める言語。
語源Cascading Style Sheets の頭文字。cascade（段々に流れ落ちる滝）のように、ルールが上から順に重なって適用されます。
- JavaScript ジャバスクリプト
Webページに動きをつけるプログラミング言語。
語源当時人気だった Java にあやかった名前ですが、Java とはまったく別の言語です。script は「台本」。
- ブラウザ Browser
Webページを見るためのソフト（Chrome、Safari、Edge など）。
語源browse は、もともと動物が若葉をあちこち食べ歩くこと。そこから「拾い読みする・見て回る」の意味に。
- Keep-Alive / 多重化 キープアライブ
一度つないだ接続を使い回す工夫。
Keep-Alive は接続を切らずにおく仕組み。HTTP/2 の多重化は、1本の接続で複数のファイルを同時にやり取りする仕組みです。
語源keep alive（生かしておく）。多重化は英語で multiplexing（multi＝たくさん、plex＝折り重ねる）。