ブラウザの作り方

リンク集
- Populating the page: how browsers work: https://developer.mozilla.org/en-US/docs/Web/Performance/How_browsers_work/
- How Browsers Work: Behind the scenes of modern web browsers: https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/
- Let's build a browser engine!: https://limpet.net/mbrubeck/2014/08/08/toy-layout-engine-1.html/
- W3C: https://www.w3.org/
- WHATWG: https://html.spec.whatwg.org/multipage/
- WEB技術の調査方法: https://blog.jxck.io/entries/2020-11-19/how-to-track-web-standards.html
- Levels, snapshots, modules…: https://www.w3.org/Style/2011/CSS-process.en.html
- Servo: https://github.com/servo/servo
- twilco/kosmonaut: https://github.com/twilco/kosmonaut
- maekawatoshiki/naglfar: https://github.com/maekawatoshiki/naglfar
- keiya01/kamaitachi: https://github.com/keiya01/kamaitachi

Transcript

1. ブラウザの作り方
 Keiya Sasaki 2021/01/25

2. ➔ Sasaki Keiya
 ➔ 大学4年生
 ➔ 4月からIT企業で
 フロントエンドエンジニア
 ➔ TypeScript・Rust
 ➔ Twitter: _keiya01
 ➔ Github: keiya01

3. 話すこと

4. 1. 実装状況
 2. 実装方法
 3. チュートリアル
 4. まとめ

5. 実装状況

6. 実装状況
 • display … block, inline • background, color • width, height, margin, border, padding • font-family(local fontのみ) • font-size, font-weight, font-style • line-height • Scroll • Text周り(改行など)
8. 実装方法

9. 手順
 1. ブラウザの仕組みを知る
 2. ブラウザを作る

10. ブラウザの仕組みを知る
 • Populating the page: how browsers work
 ◦ こっちはブラウザの詳しい説明というよりはWeb Performanceを中心にして 
 ブラウザの仕組みを解説している 
 ◦ 最初にこっちを読むと下の記事が読みやすいかも 
 • How Browsers Work: Behind the scenes of modern web browsers
 ◦ Parserの仕組みからブラウザの詳細な仕組みについて解説している 
 

11. ブラウザを作る
 • Let's build a browser engine! を読む
 ◦ Servoのメンバーの人が書いた記事 
 ◦ Rustを使って実装していく
 ◦ Part1 ~ Part7まである
 ◦ 機能を絞っているので、テンポ良く実装できる 
 ◦ HTML・CSS のParse → Style → Box Model → Layout → Paint 
 ◦ Paint部分は画像として出力している 
 • W3C を読む
 ◦ CSSなどの仕様
 • WHATWG を読む
 ◦ DOM, HTMLなどの仕様

12. 仕様の読み方(W3C)
 • Jxckさんの WEB技術の調査方法 の W3C/WHATWG のセクションを
 読むと読み方がわかってくる
 • W3Cの Levels, snapshots, modules… を読むと、どのように仕様が
 策定されていくかがわかる

13. 1. 実装したい機能をMDNで検索
 2. MDNの下の方にSpecificationsが
 出てくるので新しそうなやつを開く
 3. ざっと読んで、リンクを辿っていく
 4. 何となく理解したら、Servoなどの既存 のリポジトリの実装をみてみる
 5. 実装する
 進め方

14. 参考になるリポジトリ
 • Servo
 ◦ `/components` 配下に各moduleが入っている
 • twilco/kosmonaut 
 ◦ Servoをインスパイアしたブラウザエンジン 
 ◦ Let's build a browser engine!を参考にしている
 ◦ parserとかはservoで使われているparserを使っている 
 • maekawatoshiki/naglfar
 ◦ 日本人の方が作っているブラウザ 
 ◦ Let's build a browser engine!を参考にしている
 • keiya01/kamaitachi
 ◦ 今作っているやつ

15. チュートリアル

16. ブラウザの仕組み
 Parse
 Style
 Layout
 Paint
 HTML・CSSを Tree構造のデー タに変換する
 CSSルールをDOM と紐付ける(レン ダーツリー)
 Styleをもとに、
 それぞれの要素の Positionや高さ、
 幅を計算していく
 Layoutで計算した データをもとに
 描画していく

17. HTML Parse
 1. 1文字づつプログラム中の文字を読み込んでいく
 2. `<`が見つかったら、elementとして、タグの中身を読み取っていく
 ◦ `<div></div>`の場合、`<`が見つかると、中身を1文字づつ`>`にぶつかるまで 
 探索していく
 3. `<..>`の中身を読みよったら、次に子要素を読み取っていく
 ◦ `<div><p>children</p></div>`の場合、`<p>`を同じように読み取っていく 
 4. 子要素を読み取ったら最後に`</`があるかを確認する
 ◦ HTMLは後方互換性のために基本的に構文エラーは起きない 
 ◦ そのため、`</`がなかったとしてもそのまま処理を続ける 
 5. Text Nodeが存在する場合は、`<`に達するまで文字を読み取っていく

18. CSS Parse
 1. 先頭に`.`が見つかればclass、`#`が見つかればid、使用可能な文字列であれば
 要素名としてparseし、selectorsに格納する
 2. `{`にぶつかると宣言ブロックの処理に移る
 3. ここでは`property: value;`のペアをそれぞれparseし、declarationsに格納する
 4. CSSには詳細度(specificity)という、どのCSSルールを適用するかを決める
 重み付けのようなものがあるのでそれを求める
 ◦ idをselectorに持つ宣言はclassよりも優先されるといったようなもの 
 5. 詳細度をもとにselectorsをsortしておく

19. Style
 1. HTMLのparseで得たDOMとCSSのparseで得たCSSOMを
 Root Nodeから順に見ていく
 2. CSSのRulesは詳細度によってsortされているので、
 NodeとSelectorが最初にmatchした要素を取得する
 3. matchしたCSS Rulesを詳細度の低いものから高いものへソートし、
 HashMapにpropertyをkeyとしてvalueをinsertしていく
 ◦ これにより、先にinsertされた値は、後にinsertされる詳細度の高い値で 
 上書きされる
 4. ここでは省略するが、他にもUseragent Stylesheetとのmergeや、
 継承、computed valueなどの処理もここで行う

20. ElementにMatchしたCSS Rulesを詳細度の低いものから高いものへ ソートし、HashMapにinsertしていく
21. Layout
 1. StyleTreeからdisplayの値を受け取り、Box(display)ごとに分類する
 ◦ BlockNode, InlineNode, TextNodeなど 
 ◦ 分ける理由は、Boxによってpositionが異なるから 
 ◦ 例えば、Blockは縦方向に配置されるが、Inlineは横方向に配置される 
 2. BlockNodeの場合、width => position => children => heightの順で
 計算していく
 3. InlineNodeの場合は、扱い方が2種類ある。
 ◦ BlockNodeの中にInlineNodeのみが含まれている場合(<span>abc<em>def</em></span>) は、そのまま処理を進める
 ◦ BlockNodeの中にInlineNodeとBlockNodeが含まれている場合、各Boxは同じTypeのBoxし か含めることができないので、InlineNodeをAnonymouseBlock 
 というBoxでラップする。これにより横に配置する処理を行いやすくする。 

22. BlockNodeの例

23. AnonymousBlock
 Block(div)
 Anonymous Block
 Block

24. Paint
 1. 最初にLayout TreeからDisplayListを作成する
 ◦ DisplayListはbackground-colorやcolorなどの情報を切り出しておき、 
 レンダリング処理を行いやすくする 
 ◦ DisplayListとして切り出しておくことで、colorの変更などが起こったときに、DisplayListを 探索すれば簡単にcolorの変更ができたりする 
 2. DisplayListからItemを取り出し描画していく

25. DisplayList

26. まとめ
 • ブラウザの仕様はとても多い
 • ブラウザを作り進めるにつれて無限に仕様が湧いてくる
 • 一方で知らない世界を知れてとても楽しい(unicode, fontなど)
 • 興味を持ってくれた方がいれば是非作ってみてください！

27. ありがとうございました！