← 研修トップ
1行のHTMLが画面に出るまで
<h1>Hello</h1> と書いたファイルを小さなサーバで配り、http://localhost:3000/ を開く。文字列が名前になり、接続になり、バイト列になり、木になり、ピクセルになるまでの継ぎ目を1つずつ追い、深い話は各領域のコースへ送ります。
- 1約 9 分何を追うのか — ファイルが「表示」に変わる7つの継ぎ目画面に出た Hello は、`index.html` の中身がそのまま運ばれたものではありません。文字列 → 名前 → 接続 → バイト列 → 木 → 箱 → ピクセル、と継ぎ目ごとに作り直された結果です。
- 2約 9 分URLを打つ — :80 が消える理由アドレスバーに `http://localhost:80/` と入れても、残るのは `http://localhost/` です。`:80` は「省略できる」のではなく、パーサが既定ポートと同じ値を null に書き換えるためです。
- 3約 9 分名前がアドレスになる — localhost は DNS に行かないURLから取り出した host 文字列は、そのまま通信の宛先になりません。名前解決の入口で、IPアドレス表記・特別な名前・普通の名前に振り分けられます。
- 4約 9 分接続して送る — TCP接続の上を流れるHTTPリクエストのバイト列ブラウザがサーバに送るリクエストは特別な形式のデータではありません。TCPの接続の上を流れる、CRLFで区切られたただのバイト列です。
- 5約 9 分サーバは何を返すか — Content-Type が無いと何が起きるかサーバが返すのはただのバイト列です。それを HTML として扱ってよいと告げるのが Content-Type で、本文の中身そのものに「これは HTML だ」とは書かれていません。
- 6約 9 分バイト列がDOMになる — 閉じ忘れても表示される理由HTML パーサが壊れた HTML でも木を作れるのは、実装が親切だからではありません。HTML Standard が parse error を定義したうえで、その後の処理まで規定しているからです。
- 7約 9 分DOMがピクセルになる — 描画は「DOM完成」を待たないDOMは木の形をしたデータ構造で、できただけでは画面に何も出ません。ピクセルは Style・Layout・Paint・Raster・Draw が作ります。
- 8約 9 分JSが割り込む — <script> がパーサを止める理由`async` も `defer` も無い外部の古典スクリプトは `document.write()` でパーサの入力ストリームを書き換えられるので、パーサは取得と評価が終わるまで先を読めません。仕様は `blocking parsing until these are both complete` と書いています。