『Webブラウザエンジニアリング』第4~6章を読みました。

以下の書籍を4章から6章まで読みました。

Webブラウザエンジニアリング

Webブラウザは、現代のコンピューティング環境において欠かせない存在であり、最も広く使われているプラットフォームの一つです。本書は、その仕組みを実践的に学ぶための解説書です。実際にWebブラウザを構築する過程をたどりながら、レンダリング、HTMLパーサー、CSS、JavaScript、マルチスレッド対応、セキュリティモデル、アニメーションとコンポジット処理、ブラウザAPI、アクセシビリティなど、モダンなWebブラウザの主要な要素を順を追って解説していきます。 章ごとにコードを動かしながら、ブラウザに機能が積み重なっていく過程を通じて、ソフトウェアを成長させ改善していく経験を自然に体得できます。ブラウザ技術の研究者とChrome開発者による豊富な知見をもとに、Webの進化をたどりながら、手を動かしてブラウザの内部構造を深く理解できる一冊です。

oreilly.co.jp

1章から3章の感想については、以下で書いています。

『Webブラウザエンジニアリング』第1~3章を読みました。

以下の書籍を1から3章まで読みました。 https://www.oreilly.co.jp/books/9784814401574/ 全部で16章もあるので、こまめに感想を残しておこうと思います。 Webの歴史 Web が成り立つ経緯につい

ジブンノート

おさらい

3章までの実装により、以下のような画面が出力できるようになりました。

与えられたURLからHTMLを取得し、超簡易的にパースし、画面内にテキストを出力します。
テキストが画面内に収まらない場合は改行しますし、スクロール（下移動のみ）ができるようになりました。
また文字をベースライン上に揃えて並べるようになりました。

HTMLパース

HTMLをテキストやタグなどをフラットな構造でパースしていたところを、ツリー構造としてHTMLを分解します（DOMツリー)。
HTMLは入れ子構造ができる文書フォーマットなので、ツリー構造の相性は良いんでしょう。
HTMLのパースについては、完成済みノードと未完成のノードに分けていて、未完成ノードを完成済みノードへと入れていく作業です。

以下のHTMLがあった場合に、

<div>Hello <b>world</b></div>

以下の完成済みの構造へと変換します。

div
├── "Hello "
└── b
    └── "world"

ここのセクションで興味深かったのは、不正なHTMLフォーマット の場合への配慮です。
タグや引用符の閉じ忘れ、doctype,html,head,bodyの指定漏れなどです。
そういう誤った記述に対して、最低限表示できるように HTML を調整するとのことです。
これはかなり闇深そうです...。
現代のプログラミングにおいては、不正なフォーマットがあればエラーであることを知らせるツールはたくさんあります。
ブラウザのレンダリングエンジン側が、HTMLフォーマットがあればエラーにさせる(白紙?)とどうなっちゃうんでしょうか...？
大半のページが、白紙になっちゃうのでしょうか？
ブラウザ側の後方互換性という考えも大事なんですが、フォールトトレランスへの配慮をどこまでやるんだと悩みそうになります...。

HTMLパースの実装を終えると、以下の画面出力となりました。

データの持ち方が変わっただけなので、3章とほとんど変わらないはずです。

レイアウトツリー

DOMツリーができたので、次はそれをWebページへ反映したいですね。
今は、ただただテキストを横に並べいるだけです。
そこで、DOMツリーをベースに、レイアウトツリーを作ります。
レイアウトツリーは、対象ノード（要素）のサイズや表示位置の情報を保持します。
これまでの表示値は絶対位置で表現していたのですが、親子関係による相対位置を表すようにします。
また、要素がブロック要素なのかインライン要素なのかによっても、表示位置が変わります。

ブロック要素の場合は、横幅は親の横幅と同じで、縦幅は子の高さの合計です。
表示位置は、xは親のxと同じで、yは親のyと親のheightの合計です。
並べる方向は、下へ並べていきます。
これらは、以下の記事にあるようなブロック・インラインのお話かと思います。

• 通常フローでのブロック・インラインレイアウト - CSS | MDN - developer.mozilla.org

知らなかったこととして、無名ボックス という概念です。

• 視覚整形モデル - CSS | MDN - developer.mozilla.org

これは、以下のような1つの要素の中に、ブロックやインライン・テキストが混在しているケースです。

<div>
  これは無名ボックスに囲まれています。
  <p>これは段落の中にあります。</p>
  これは無名ボックスに囲まれています。
</div>

この場合、pはブロック要素で、"これは無名ボックスに囲まれています。" はインライン・テキストです。
この場合に、インライン・テキストには、無名ボックスとして扱われるみたいです。
無名ボックスには、CSSでスタイルを定義することができないようです。
本書の実装では、ブロック要素として扱うようになっています。

レイアウトツリーの実装を終えると、以下の画面出力となりました。

レイアウト構造が可視化されているかと思います。

脱線

本書の実装は、毎回小さな実装から始まります。
HTMLのパーサなどを小さなクラスとして定義して、少しずつ拡充しています。
読者としても、1人のWeb開発者としても、小さいものを組み立てていく流れが読みやすくて好感が持てます。
命名においても、現時点での意味に近しいネーミングにしておいて、意図が変わった段階でリネームをされています。
そういう細かな書き方を、私も見習いたいなと思いました。

スタイル

レイアウトツリーが出来上がると、今度は見た目を整えたくなります。
見た目は、style属性を書くことで変更できます。

DOMツリーを生成後、1つずつ要素のstyle属性をパースします。
style属性は、コロンで区切られたkey/valueのペアです。
複数のstyleを定義する場合は、セミコロンを使います。
この前提で、簡易的なCSSパーサーを作成し、DOMツリーのノードにstyleを渡して、レイアウトツリーから参照できる形にします。

スタイルのパーサーを見ていて思ったのは、エラー時に静かにスキップされる挙動 です。
これは現在のブラウザでも同じなのですが、プロパティミスなどでエラーになった場合、そのプロパティをスキップします。
特に何も壊れることもなく、ただ自然にその他のスタイルが適用されます。

脱線

HTMLのパーサのときもそうでしたが、ブラウザのレンダリングエンジンって誤りをできる限り縮めて表示に努めようとします。
今ではDevToolsがあるのでスタイル未適用の確認は容易ですが、DevToolsがない時代だと未適用になってしまったプロパティを調べるのに苦労しそうですね。
まあ、見た目を整えたくてプロパティを書いている訳なので未適用だったら困るので気づくとは思いますが...。

話を戻して

style属性から次はCSSを読み込むようにします。
CSSは、どれにスタイルを適用するのかというセレクターと上書き可能なカスケーディングの考えの2つがあります。
最小実装のため、セレクターはタグと子孫の2つだけにしています。
CSS はHTMLで定義された順序で読み込み、セレクターの優先度（タグと子孫）によってスタイルを適用します。
現時点では、フォント関係のスタイルだけ使えるようになります。(font-sizeやcolorなど)
また、継承されるスタイルについても言及されており、親要素のスタイルを子要素へ継承するロジックも実装しました。

CSSの読み込み、スタイルの優先付け、テキストにフォント関連のスタイルを渡して、Tkinterで描画する際に色などをつけるようになりました。
（色々と省略しました...笑)

スタイル実装を終えると、以下の画面出力となりました。

見た目がかなり整いはじめました。
CSSの処理は、セレクターやプロパティをかなり限定的にしているので楽でしたが、特に優先度決めをするのって全件走査してポイントを決めないといけないので、負荷とか高そうだなと... ぐらいを思いました。

終わりに

4章から6章まで読みましたが、だんだんとコードベースがボリューミーになってきました。
そのため、1つ1つトレースするのが大変になってきました。（まだまだ小さいブラウザなのに）
振る舞いを理解しやすくするためにテストコードが欲しくなりますね。
次の章も読むのが楽しみです。

s

silverbirder

Webソフトウェアエンジニア