Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ブラウザ作りのすゝめ

 ブラウザ作りのすゝめ

ブラウザ作りはいいぞ!という話

Shinobu Hayashi

October 27, 2021
Tweet

More Decks by Shinobu Hayashi

Other Decks in Programming

Transcript

  1. Who am I • Shinobu Hayashi • GitHub & Twitter:

    @Shinyaigeek • vs 卒論 🔥 • 4月から某メディア企業でWebをやります👶 • 💕 : 🎯 🍻 🍣 🕸
  2. Agenda 🗒 1. ブラウザの仕組み(簡略な) 🤓 2. 実装方法 🤖 3. 参考リンク集

    (後で資料もツイートします) 📕 4. Shinyaic Browserの実装状況 ⏩ 5. ブラウザを作る楽しさ 🔥
  3. 実装方法 (HTML Parser) • HTML ファイルから DOM を構築する • 丁寧に行うのであれば

    ◦ 1文字 (Character) ずつ解析して Token に落とし込む(開始タグ, 閉じタグ, self closing tag, text, attribute key, etc…) ◦ それをもとにDOMを構築していく • Shinyaicでは簡単に ◦ < から始まったら開始タグとして処理 ▪ まずattributesをタグが閉じられるまで処理する ▪ そのタグの子を再帰的に parseしていく • といった実装になっています
  4. 実装方法 (CSSOM) • まず #id1 や p , .class1 といった

    selector をparseする ◦ pseudu elementsやcombinatorにも配慮が必要 • selectorのparseが終わり { にぶつかるとそのブロックの parseにはいる • ブロック内のparseでは, key: value; とし処理していく • @以下のメディアクエリも処理する
  5. 実装方法 (RenderTreeの構築) • DOM と CSSOM によって RenderTree を構築する •

    RenderTree はその名の通り, 矩形情報を算出する処理や , 描画する処理に必要な情報が入る Nodeで構 成されるTree <-> Document OM Tree • display: none; が付与されている要素や, <head />, <meta />は描画されないのでRenderTreeに含まれ ない • <div /> か <p /> かといった情報も省き, 内部表現としてInline Node, Block Node, Text Node, Scroll Node, Document, Nodeとして表現した • どのNodeにどのstyleが割り当てられるかも計算する • Useragent Stylesheetの反映などもここで行った
  6. 参考にしたリンク集 • How Browsers Work: Behind the scenes of modern

    web browsers : ブラウザの仕組みが細かく解説 されている • lmt-swallow/puppy-browser :セキュキャンの資料に作られたブラウザ . 知る限り最もシンプルで読みや すい. • ブラウザレンダリングの仕組み :日本語資料でわかりやすい • W3C/WHATWG: 実際に実装する際にはここを読んでいく ◦ MDNをリンク集として、まず MDNで調べる箇所を調べてジャンプするとわかりやすい ◦ TC39って何?W3Cって何?ってなる人は  Web技術の調査方法  を読むといいかも
  7. Shinyaic の進捗 • example.com を表示できるようになった • HTTP通信には, 自作HTTP Clientの konnnyakuを利用している

    ◦ TCPの上から実装した ◦ TLSについてはnative-tlsを利用 • JSはほぼ進捗がない ◦ とりあえずJS -> bytecodeにして, bytecodeを実行する部分を学生の うちに作ってしまいたい ◦ なのでWeb APIもまだ • HTML, CSSについても足りない部分はま だ多い
  8. ブラウザを作る楽しさ • 仕様を読んでいくモチベーションにつながる • Webフロントエンドをやるだけではなかなか身につかない知識もついていく ◦ 通信プロトコル ◦ 描画エンジン •

    仕様の量は膨大なため, そう簡単には終わらない, なので盆栽の気分で一生楽しめる趣味 • 使うだけではなく実際に作ることでブラウザの内部についてより身近に詳しく知れる • 既存のブラウザは凄い😇 • みんなもブラウザ, 作ろうや....
  9. ❌ 早く雑に作る ⭕ 早く小さく作る • このような完全に趣味に振り切ったような個人開発であっても , 成果は大事 ◦ モチベーションに繋がる

    🔥 ◦ 正直苦行かと聞かれると苦行なのでモチベーションがないとなかなか続かない • 早く成果を出すために, テストを書くことをサボる, するべき抽象化をしない, 設計をちゃんと考えないといっ た, 雑に作ることをしていてはいつか破綻する ◦ ブラウザ作りは時間がかかるので , 早く成果を出すことと長く続けることを意識する • 早く作るために雑に作るのではなく , 早く作るために小さく作る ◦ まずHTMLをparseするところからしよう , まずは <body><p>hoge</p></body>をparseできるように, 次に attributeあってもparseできるように.... ◦ RenderTreeの構築をしたいけど , CSSとNodeのマッチングは難しそうなので一回単純なセレクターのみに対して マッチングできるようにしよう ...