More than 5 years have passed since last update.

バイト列を受け取ったブラウザがDOMツリーをつくるまで

Last updated at 2018-06-04Posted at 2018-03-12

概要

ブラウザがページをレンダリングするまでにはいくつかのステップを経ている。
googleのConstructing the Object Modelを読んで、分からなかった単語などを調べながらまとめる。
CSSDOMのところは除いてとりあえずDOMツリーが作られるところまで。

ブラウザーに渡されたバイト列は、下のような流れでDOMツリーになってレンダリングされる。
英語が苦手な人もgoogleのページの図を見てもらえると分かりやすいかと。

バイト列
  ↓
文字列
  ↓
トークン
  ↓
オブジェクト
  ↓
DOMツリー

ブラウザーは、サーバーやディスクから読み込んだバイト列を、決まった文字コードに応じて文字列に変換する。
例えば、htmlファイルのheadに<meta charset="utf-8">があれば、バイト列をUTF-8として処理する。

ブラウザーは文字列を<html>や<body>などカギカッコ(angle brackets)に囲まれたトークン¹に変換する。
それぞれのトークンはそれぞれの特性を持っている。

トークンがオブジェクト(ノード)へと変換される。
Tokenizeで、headやbodyなどの各タグは始まりのタグと終わりのタグで別個になっていたが、
この段階でひとまとまりのオブジェクトへと変換される。

HTMLでは各タグ同士の包含関係などの関係性が書かれているので、オブジェクトは木構造へと結びつけられる。
htmlタグがparent、head、bodyがchildといった形。
リンク先の図が分かりやすい。