PHPでWebブラウザのレンダリングエンジンを実装する

昨今のWebアプリ開発において、Webブラウザは切っても切れない存在です。このWebブラウザには、HTMLとCSSからテキストや画像を描画する「レンダリングエンジン」が含まれています。

これがどのような仕組みで動いているのか、その裏側についてはご存知でしょうか?

このトークでは、超ミニマムな簡易レンダリングエンジンをPHPで実装することで、レンダリングエンジンの大まかな仕組みの理解を目指します。また今回のトークで用いた、サンプルコードを他言語で再実装する勉強法も合わせてご紹介します。

このトークを聞き、レンダリングエンジンの裏側を垣間見ることで、Webアプリ開発におけるブラウザからの新たな視点を獲得できるでしょう。

Transcript

1. PHPで webブラウザのレンダリングエンジンを実装する ディップ株式会社 / 渡邉泰曉 1
2. セッションのゴール 今回は、聞いていただいた方が 1. Webブラウザの内部処理について、概要レベルで理解できている 2. ブラウザについて興味を持てる 状態になっていること 3
3. 本日のアジェンダ 1. Webブラウザとは? 2. PHPでWebブラウザを実装する 3. デモ 4. まとめ 4
4. 1. Webブラウザとは ? 5
5. そもそもWebブラウザって何 ? エンジニアに限らず、多くの人がブラウザを使っている Chrome, etc,,, ブラウザもソフトウェアだが、それを開発するプロジェクトはどんなもの? 6 https://about.google/brand-resource-center/logos-list/ https://www.google.com/intl/ja_jp/chrome/ GoogleとGoogleのドキュメントはGoogle LLCの商標であり、この資料は Googleによって承認されておらず、Googleに所属していません。
6. 現代のWebブラウザは非常に巨大なプロジェクト UIで見えるだけでも、Webページの表示、開発者向け機能、組み込みAI… 7 http://example.com/
7. Webブラウザの中身はどうなってるの ? Chromium(代表的なブラウザプロジェクト)のソースは約3588万行 それは、どんな仕組みで動いてる? 例えば、なんでHTML + CSSでWebページのレイアウトが決まる? 中身を知りたくありませんか ? 8 https://openhub.net/p/chrome/analyses/latest/languages_summary
8. (再掲)セッションのゴール 1. Webブラウザの内部処理について、概要レベルで理解できている → 理解のために PHPで実装してみました。 9
9. 2. PHPでWebブラウザを実装し よう 10
10. 実装の前に、今回のスコープ 本セッションで実装するWebブラウザの処理は、下記の2つのみ 1. HTTPクライアントとしての処理 2. レンダリングエンジンとしての処理 ※ JSの実行などは対象外 11
11. HTTPクライアントとしての処理 12
12. HTTPの超概観 そもそもHTTPとは? → HTML文書などのリソースを読み取るための、データ交換ルールの体系 注) 今回は HTTP/1.1を扱う 13 https://developer.mozilla.org/ja/docs/Glossary/Protocol https://developer.mozilla.org/ja/docs/Web/HTTP/Guides/Overview
13. HTTPリクエストはどんな構造 ? HTTP/1.1はテキストベースなので、人間が読める 各部を簡単に読んでみましょう 14 https://datatracker.ietf.org/doc/html/rfc7230#page-21
14. HTTPリクエストの構造 リクエストライン HTTPメソッド(GET, etc)、リクエスト対象(パス)などを保持 15 https://datatracker.ietf.org/doc/html/rfc7230#page-21
15. HTTPリクエストの構造 ヘッダー (本セッションではざっくりいうと)リクエストの追加情報 16 https://developer.mozilla.org/ja/docs/Web/HTTP/Reference/Headers
16. HTTPレスポンスの構造 ステータスライン - HTTPバージョン - ステータスコード などが含まれる 17 https://datatracker.ietf.org/doc/html/rfc7230#section-3.1.2
17. HTTPレスポンスの構造 ヘッダー (ざっくりいうと)追加情報 18 https://datatracker.ietf.org/doc/html/rfc7230#section-3.1.2
18. HTTPレスポンスの構造 メッセージ本文 今回は、レンダリングエンジンの解析対象の、 HTML文書が入る 19 https://datatracker.ietf.org/doc/html/rfc7230#section-3.1.2
19. レンダリングエンジンとしての処理 20
20. 2. レンダリングエンジンとしての処理 レンダリングエンジンとは? ウェブブラウザーの一部 HTML、CSSなどを解釈して描画するソフトウェア ※ Chromiumの例では、 `src/third_party/blink` の下にあるコードを指す 21 https://developer.mozilla.org/ja/docs/Glossary/Engine/Rendering https://www.chromium.org/blink/#what-is-blink https://www.chromium.org/blink/
21. 本セッションで実装するレンダリングエンジンの処理 ざっくり以下の流れ 1. HTMLの解析 2. CSSの解析 3. 描画用のデータ構造(Layout Tree)の構築 4. 描画 22
22. HTMLの解析 23
23. HTMLの仕様 仕様がわからないと解析できない WHATWGというコミュニティが、HTMLの仕様を定めている。 24 https://html.spec.whatwg.org/multipage/sec tions.html#the-body-element
24. HTMLを字句解析する 字句解析とは? → 意味のある最小単位である「トークン」に分割すること → 「Tokenization」ともいう 25 https://gihyo.jp/book/2024/978-4-297-14546-0
25. どうやって字句解析する ? HTMLの字句解析も仕様が決まっている このアルゴリズムは、(下記仕様にあるように、)ステートマシンとして実装する > Implementations must act as if they used the following state machine. 26 https://html.spec.whatwg.org/multipage/parsing.html#tokenization
26. ステートマシンとは ? ステートマシンとは、振る舞いや操作を表現するために使うモデルやアルゴリズム 主に「状態」と「遷移」で構成される ※下記はあくまで概念的な図 27 https://gihyo.jp/book/2024/978-4-297-14546-0 https://www.lucidchart.com/pages/uml-state-machine-diagram
27. ステートマシンとは ? 字句解析でどう使われるのか? 今回は <p>hoge</p> のような、単純な例を考える。 解析過程を見ていく 28 https://gihyo.jp/book/2024/978-4-297-14546-0 https://www.lucidchart.com/pages/uml-state-machine-diagram
28. まずData状態から開始 字句解析とステートマシン 29 https://gihyo.jp/book/2024/978-4-297-14546-0 https://html.spec.whatwg.org/multipage/parsing.html#tokenization <p>hoge</p>
29. 次に、小なり < が入力されると、 TagOpen状態に切り替わる 字句解析とステートマシン 30 <p>hoge</p> https://gihyo.jp/book/2024/978-4-297-14546-0 https://html.spec.whatwg.org/multipage/parsing.html#tokenization
30. 文字が入力されると StartTagトークンを生成 & p の文字をトークンに追加 TagName状態に切り替え 字句解析とステートマシン 31 <p>hoge</p> https://gihyo.jp/book/2024/978-4-297-14546-0 https://html.spec.whatwg.org/multipage/parsing.html#tokenization
31. 大なり > が入力されると、Data状態に戻り、 StartTagトークン( <p> )が完成 字句解析とステートマシン 32 <p>hoge</p> https://gihyo.jp/book/2024/978-4-297-14546-0 https://html.spec.whatwg.org/multipage/parsing.html#tokenization
32. Tokenization (残りは割愛して) 最後まで文字を消費(consume)すると 右記のようなトークン列が完成 33
33. 構文解析 字句解析の次は、構文解析 これはHTML仕様書の「Tree construction」で仕様が定められている。 ざっくりいうと、字句解析されたToken列を受け取り、 DOM Tree(ブラウザが実行できる内部形式)を出力する処理。 34 https://html.spec.whatwg.org/multipage/parsing.html#tree-construction https://gihyo.jp/book/2024/978-4-297-14546-0
34. DOM Tree そもそもDOMとは? > ウェブ上の文書のコンテンツと構造からなるオブジェクトのデータ表現 これも「DOM Standard」という仕様が定義されている 35 https://html.spec.whatwg.org/multipage/parsing.html#tree-construction https://developer.mozilla.org/ja/docs/Web/API/Document_Object_Model/Introduction
35. DOM Treeの構築 ではDOM Treeとは? → HTML文書のコンテンツを木構造で表現したもの 一つ以上の「ノード」で構成される 36 https://developer.mozilla.org/ja/docs/Web/Performance/Guides/How_browsers_work#dom_%E3%83%84 %E3%83%AA%E3%83%BC%E3%81%AE%E6%A7%8B%E7%AF%89
36. 構文解析(DOM Tree構築)の流れ (おおまかに言うと、) 仕様で定義された状態を遷移させながら、トー クン列を一つずつ解析し、DOM Treeを構築する。 → 文章だと分かり辛いので、図で説明する 37
37. 構文解析(DOM Tree構築)の流れ 今回の例では、左のHTMLが、右のトークン列に字句解析された前提とする 38
38. 構文解析(DOM Tree構築)の流れ (字句解析と同様に) 状態と遷移が仕様で定義されている。 順次、状態を遷移させる。 39
39. 構文解析(DOM Tree構築)の流れ 構文解析器の作成時は、 Documentオブジェクトのみ これに要素を加えて、 DOM Treeを拡張していく 40 https://html.spec.whatwg.org/multipage/parsing.html#tree-construction
40. Before html状態 41 html要素をDocumentノードの下に作成 これも下記英文のように仕様が決まっている > Create an element for the token (中略), > with the Document as the intended parent. https://html.spec.whatwg.org/multipage/parsing.html#the-before-html-insertion -mode
41. 最終的なDOM Tree 最終的に、 右図のようなDOM Treeが構築される 42
42. CSSの解析 43
43. CSSの解析 大まかな流れはHTMLと同様 1. 字句解析 (Token列の生成) 2. 構文解析 (Tree(CSSOM)の生成) 今回は概要の説明に留める 44
44. 字句解析 1文字ずつ入力を解析 → CSSトークンを生成 → トークン列にpush 45 https://html.spec.whatwg.org/multipage/pars ing.html#the-before-head-insertion-mode
45. 構文解析 (Tree(CSSOM)の生成) トークン列を受け取り、[CSSOM(CSS Object Model)ツリー」と呼ばれる木構造に変 換 46 https://www.w3.org/TR/css-syntax-3/#tokeni zing-and-parsing
46. 描画用のデータ構造 (Layout Tree) の構築 47
47. Layout Treeとは? ブラウザで表示される要素の位置 やサイズを、保持する。 (統一された仕様は無いが、) ChromeやFirefoxは、内部でレイ アウト用の木構造を持つ 48 https://firefox-source-docs.mozilla.org/gfx/RenderingOverview.html#layout https://developer.chrome.com/blog/inside-browser-part3?hl=ja
48. Layout Treeの構築 じゃあどのように、構築されるのか? (今回の実装では) 大きく分けて2段階で構築される 1. 要素にスタイルを割り当てる 2. 要素の位置を計算し、保持させる 49
49. 1. 要素にスタイルを割り当てる DOM Treeを再帰的に走査し、スタイルが要素に当てはまるか判断する body要素からの例は下図 50 これはbodyセレクターの スタイル指定がヒット
50. 子要素を再帰的に走査 1. 要素にスタイルを割り当てる 51 子要素をたどる 子要素をたどる これはデフォルティ ング これはクラスセ レクターの指定 がヒット
51. 2. 要素の位置を計算し、保持させる 各要素のスタイルが決まったら、要素位置を計算 具体的には、 - ブロック or インライン要素を判定 - 要素の位置(XY座標)を計算 などの処理 今回は、要素位置の計算のみ触れる 52 Block inline inline inline
52. 要素の位置計算の例 右記のDOM Treeを考える 53
53. まずは、要素を深さ優先探索する (p要素の計算に到達したと仮定) 要素の位置計算の例 54
54. 要素の位置計算の例 (p要素に到達したら) 親/兄弟要素を考慮し、p要素の位置を決定 55 X軸位置は親要素(body)に合わせよう 兄弟要素(h1)はブロック要素だな Y軸方向に座標を進めよう
55. 要素の位置計算の例 p要素の座標を計算したイメージ → これを繰り返し、Layout Treeを構築 56 h1 p
56. 構築された Layout Treeの例 それぞれのNodeが - 位置情報 (XY座標) - スタイル - サイズ など画面表示に必要な情報を持つ。 (display: noneなど)非表示の要素は、 Treeから除外 57
57. 描画処理 最後にUI上へ描画する ここからは本セッションの独自実装 PHPのGDライブラリを使い、png画像として描画結果を出力 58 https://www.php.net/manual/ja/book.image.php
58. デモ 59
59. ローカルのサンプル HTMLページを表示 composer run render-samples 60 https://www.php.net/manual/ja/book.image.php
60. example.comにリクエストし、描画 composer run render-example 61 https://www.php.net/manual/ja/book.image.php
61. 描画結果 62
62. まとめ PHPでWebブラウザのレンダリングエンジンを実装 した。 今回は概要レベルの説明。 興味がある方は、「[作って学ぶ] ブラウザの仕組み」 などの情報を参考にしてください。 (本セッション作成時、大変参考にさせていただきました) 63 https://gihyo.jp/book/2024/978-4-297-14546-0
63. ビジョン “Labor force solution company” ⼈材サービスとDXサービスの提供を通して、労働市場における諸課題を解決し、 誰もが働く喜びと幸せを感じられる社会の実現を⽬指します。 × DX事業 Digital labor force solution バイトコミュニケーションアプリ『バイトルトーク』や、 機能を絞ったシンプルなSaaS型の『コボット』を通じて、 職場環境やコミュニケーション課題を解決 しています。 ⼈材サービス事業 Human work force solution ユーザーファーストな独自機能を搭載した、 求人情報・人材紹介サービスの提供を通じて、 ユーザーの就業課題 を解決しています。 ディップ株式会社とは 64
64. エンジニアリングの力でビジネスを成長させ、 「誰もが働く喜びと幸せを感じられる社会」を共に実現しましょう。 「挑戦し、変化し、リードする仲間」を募集中 65
65. ご清聴ありがとうございました。 66
66. Appendix - https://gihyo.jp/book/2024/978-4-297-14546-0 - https://browser.engineering/index.html - https://limpet.net/mbrubeck/2014/08/08/toy-layout-engine-1.html - https://developer.chrome.com/docs/chromium/renderingng-architecture ?hl=ja - https://www.chromium.org/developers/design-documents/ - https://developer.chrome.com/blog/inside-browser-part3?hl=ja - https://html.spec.whatwg.org/multipage/ - https://dom.spec.whatwg.org/ - https://developer.mozilla.org/ja/docs/Web 67