【実務・中級編】 HTMLパースの仕組みとトークン化 – Webブラウザの仕組み実践ガイド

ブラウザの「解釈」という名の魔法：HTMLパースとトークン化の深淵へ

「ブラウザにHTMLを渡せば、勝手に画面が出来上がる」。フロントエンドエンジニアにとって、これはあまりにも日常的な光景ですよね。しかし、その裏側でブラウザがどれほどの「泥臭い格闘」をしているか、考えたことはありますか？

今日は、ブラウザがHTMLという単なるバイト列を、我々がDOMと呼ぶオブジェクトの森に変えるまでの、極めて論理的かつ執念深いプロセスについて深掘りします。

—

1. HTMLは「文脈」という名の迷宮である

まず心に留めておいてほしいのは、HTMLはプログラミング言語のような厳格な文法を持っていないということです。`

`を閉じ忘れても、`

`の中に直接テキストを書いても、ブラウザは「エラー」で止まることはありません。

これを実現するために、ブラウザのHTMLパーサーは「トークン化（Tokenization）」という強力な字句解析アルゴリズムを駆使しています。いわば、混沌とした文字列の中から「これは開始タグだ！」「これは属性だ！」とラベルを貼っていく作業です。

トークン化のリアルな裏側

ブラウザはバイトストリームを受け取ると、ステートマシン（状態遷移機械）を起動します。

`Data`（通常状態）
`Tag open`（`<`を見つけた）
`Tag name`（タグの種類を判定）
`Attribute name`（属性を見つけた）

このプロセスを繰り返すのですが、特筆すべきは「エラーリカバリ」です。仕様書（HTML Living Standard）には、開発者が書きそうな「ありとあらゆるおかしな記述」に対して、どう解釈すべきかが数千ページにわたって記述されています。ブラウザは、HTMLが壊れていても「こう書きたかったんだろう？」と文脈を推測してDOMを構築しているのです。

—

2. DOMツリー構築の舞台裏：パーサーは立ち止まらない

トークン化された情報は、次に「ツリー構築（Tree Construction）」ステップへ渡されます。ここで重要なのは、トークン化とDOM構築は並行して行われるということです。

ブラウザはネットワークからデータが届くたびに、少しずつDOMノードを作成し、親子関係（ツリー）を構築していきます。ここで一つ、パフォーマンスに関する重要なTipsがあります。

`defer` と `async` の真実

パーサーがHTMLを読み込んでいる最中、`

タイトルとURLをコピーしました