バイト列を受け取ったブラウザがDOMツリーをつくるまで
概要
ブラウザがページをレンダリングするまでにはいくつかのステップを経ている。
googleのConstructing the Object Modelを読んで、分からなかった単語などを調べながらまとめる。
CSSDOMのところは除いてとりあえずDOMツリーが作られるところまで。
バイト文字列からDOMオブジェクトになるまでの流れ
ブラウザーに渡されたバイト列は、下のような流れでDOMツリーになってレンダリングされる。
英語が苦手な人もgoogleのページの図を見てもらえると分かりやすいかと。
バイト列 ↓ 文字列 ↓ トークン ↓ オブジェクト ↓ DOMツリー
バイト文字列から文字列へ - Conversion
ブラウザーは、サーバーやディスクから読み込んだバイト列を、決まった文字コードに応じて文字列に変換する。
例えば、htmlファイルのheadに<meta charset="utf-8">があれば、バイト列をUTF-8として処理する。
文字列からトークンへ - Tokenizing
ブラウザーは文字列を<html>や<body>などカギカッコ(angle brackets)に囲まれたトークン1に変換する。
それぞれのトークンはそれぞれの特性を持っている。
トークンからノードへ - Lexing
トークンがオブジェクト(ノード)へと変換される。
Tokenizeで、headやbodyなどの各タグは始まりのタグと終わりのタグで別個になっていたが、
この段階でひとまとまりのオブジェクトへと変換される。
- Lex - レキシカルアナライザ(字句解析プログラム)を生成するプログラム
オブジェクトからDOMツリーへ
HTMLでは各タグ同士の包含関係などの関係性が書かれているので、オブジェクトは木構造へと結びつけられる。 htmlタグがparent、head、bodyがchildといった形。 リンク先の図が分かりやすい。
