Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
ブラウザ作りのすゝめ
Shinobu Hayashi
October 27, 2021
Programming
1
260
ブラウザ作りのすゝめ
ブラウザ作りはいいぞ!という話
Shinobu Hayashi
October 27, 2021
Tweet
Share
More Decks by Shinobu Hayashi
See All by Shinobu Hayashi
爆速の日経電子版開発の今
shinyaigeek
2
570
加速するEdge Computing
shinyaigeek
6
5.9k
ASTをいじいじして僕のかんがえた最強のDXを得る
shinyaigeek
0
160
フロントエンド
shinyaigeek
0
110
Web Frontend Performance Tuning
shinyaigeek
1
170
Other Decks in Programming
See All in Programming
Use KMM to call the API of the National Tax Agency
akkeylab
0
300
Zynq MP SoC で楽しむエッジコンピューティング ~RTLプログラミングのススメ~
ryuz88
0
340
SHOWROOMの分析目的を意識した伝え方・コミュニケーション
hatapu
0
240
社会人 20 年目エンジニア、発信で技術学びなおしてる話
e99h2121
1
140
AWS App Runnerがそろそろ本番環境でも使い物になりそう
n1215
PRO
0
980
OSSから学んだPR Descriptionの書き方
fugakkbn
4
130
jq at the Shortcuts
cockscomb
1
410
新卒でサービス立ち上げから Hasuraを使って3年経った振り返り
yutorin
0
220
Azure Functionsをサクッと開発、サクッとデプロイ/vscodeconf2023-baba
nina01
1
330
Functional Data Engineering - A Blueprint for adopting functional principles in data pipeline
vananth22
0
180
ECテックカンファレンス2023
kspace
1
310
データドリブンな組織の不正検知
fkubota
0
180
Featured
See All Featured
The Invisible Side of Design
smashingmag
292
48k
Writing Fast Ruby
sferik
613
58k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
6
840
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
31
20k
Creatively Recalculating Your Daily Design Routine
revolveconf
207
11k
Imperfection Machines: The Place of Print at Facebook
scottboms
254
12k
Why You Should Never Use an ORM
jnunemaker
PRO
49
7.9k
Designing for humans not robots
tammielis
245
24k
Building a Scalable Design System with Sketch
lauravandoore
451
31k
Thoughts on Productivity
jonyablonski
49
2.7k
Producing Creativity
orderedlist
PRO
335
38k
Principles of Awesome APIs and How to Build Them.
keavy
117
15k
Transcript
ブラウザ作りのすゝめ @Shinyaigeek/Shinobu Hayashi
Who am I • Shinobu Hayashi • GitHub & Twitter:
@Shinyaigeek • vs 卒論 🔥 • 4月から某メディア企業でWebをやります👶 • 💕 : 🎯 🍻 🍣 🕸
イベント参加前夜... という無茶振りがきた ...
自作ブラウザ Shinyaic についての 話をします
Agenda 🗒 1. ブラウザの仕組み(簡略な) 🤓 2. 実装方法 🤖 3. 参考リンク集
(後で資料もツイートします) 📕 4. Shinyaic Browserの実装状況 ⏩ 5. ブラウザを作る楽しさ 🔥
ブラウザの仕組み(概略図)(実際にはもう少し細かい)
実装方法 (HTML Parser) • HTML ファイルから DOM を構築する • 丁寧に行うのであれば
◦ 1文字 (Character) ずつ解析して Token に落とし込む(開始タグ, 閉じタグ, self closing tag, text, attribute key, etc…) ◦ それをもとにDOMを構築していく • Shinyaicでは簡単に ◦ < から始まったら開始タグとして処理 ▪ まずattributesをタグが閉じられるまで処理する ▪ そのタグの子を再帰的に parseしていく • といった実装になっています
実装方法 (CSSOM) • まず #id1 や p , .class1 といった
selector をparseする ◦ pseudu elementsやcombinatorにも配慮が必要 • selectorのparseが終わり { にぶつかるとそのブロックの parseにはいる • ブロック内のparseでは, key: value; とし処理していく • @以下のメディアクエリも処理する
実装方法 (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の反映などもここで行った
実装方法 (RenderTreeの構築) • どのDOM Nodeにどのstyleが割り当てられるか というアルゴリズムは思っていた以上に大変だっ た • 最初シンプルに作るなら, 結合子のことは考えずに
シンプルなセレクターにのみ対応するのがいいか も
実装方法(Layout) • RenderTreeを元に, そのNodeの種類やstyleによって矩形情報を計算する ◦ 例えばinline, blockかで幅や並びの計算は変わってくる ◦ Blockだとまずwidth, 次に位置,次に再帰的に子要素を計算し子要素から高さを割り出す
• テキストがこのフォントで描画された時高さがどうなるかなどの計算も必要 • paddingやwidthなど割り当てられたstyleがあればそれを元に計算する
実装方法(paint) • ここでlayoutした情報をもとに実際に描画する • iced という描画エンジンを利用 • styleから色味やフォントを描画エンジン向けの表現にする
参考にしたリンク集 • How Browsers Work: Behind the scenes of modern
web browsers : ブラウザの仕組みが細かく解説 されている • lmt-swallow/puppy-browser :セキュキャンの資料に作られたブラウザ . 知る限り最もシンプルで読みや すい. • ブラウザレンダリングの仕組み :日本語資料でわかりやすい • W3C/WHATWG: 実際に実装する際にはここを読んでいく ◦ MDNをリンク集として、まず MDNで調べる箇所を調べてジャンプするとわかりやすい ◦ TC39って何?W3Cって何?ってなる人は Web技術の調査方法 を読むといいかも
Shinyaic の進捗 • example.com を表示できるようになった • HTTP通信には, 自作HTTP Clientの konnnyakuを利用している
◦ TCPの上から実装した ◦ TLSについてはnative-tlsを利用 • JSはほぼ進捗がない ◦ とりあえずJS -> bytecodeにして, bytecodeを実行する部分を学生の うちに作ってしまいたい ◦ なのでWeb APIもまだ • HTML, CSSについても足りない部分はま だ多い
ブラウザを作る楽しさ • 仕様を読んでいくモチベーションにつながる • Webフロントエンドをやるだけではなかなか身につかない知識もついていく ◦ 通信プロトコル ◦ 描画エンジン •
仕様の量は膨大なため, そう簡単には終わらない, なので盆栽の気分で一生楽しめる趣味 • 使うだけではなく実際に作ることでブラウザの内部についてより身近に詳しく知れる • 既存のブラウザは凄い😇 • みんなもブラウザ, 作ろうや....
❌ 早く雑に作る ⭕ 早く小さく作る • このような完全に趣味に振り切ったような個人開発であっても , 成果は大事 ◦ モチベーションに繋がる
🔥 ◦ 正直苦行かと聞かれると苦行なのでモチベーションがないとなかなか続かない • 早く成果を出すために, テストを書くことをサボる, するべき抽象化をしない, 設計をちゃんと考えないといっ た, 雑に作ることをしていてはいつか破綻する ◦ ブラウザ作りは時間がかかるので , 早く成果を出すことと長く続けることを意識する • 早く作るために雑に作るのではなく , 早く作るために小さく作る ◦ まずHTMLをparseするところからしよう , まずは <body><p>hoge</p></body>をparseできるように, 次に attributeあってもparseできるように.... ◦ RenderTreeの構築をしたいけど , CSSとNodeのマッチングは難しそうなので一回単純なセレクターのみに対して マッチングできるようにしよう ...
当たり前のことを当たり前にする(仕 様に従えば)当たり前に動く
ご静聴有難うございました