1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

著者に学ぶ!ブラウザの仕組み

Posted at

下記に参加してきましたー!
キャリアについてのお話もありましたが、私は前半の技術パート狙いでした:relaxed:

ブラウザの仕組みの概要をわかりやすく説明してくださって興味が出ました!
読みたい技術書がどんどん増えて困るわw
メモ書きですが備忘録として!

スクリーンショット 2025-03-19 19.12.14.png

Rustとは?

RustはFireFoxのレンダリングエンジンをかくために作られた言語
ちょっとJSに似ているな・・・
https://qiita.com/tkomamsu/items/98fab16cfee0cb23a957

ブラウザとは?

スクリーンショット 2025-03-19 19.13.35.png

その機能を担っているのは下記のコンポーネント
(ブラウザによって呼び方や意味合いは変わる)
スクリーンショット 2025-03-19 19.14.23.png

レンダリングと最低限のUIと最低限のネットワーク

スクリーンショット 2025-03-19 19.15.32.png

ChromeとEdgeの中身が一緒?

レンダリングの中身(= コンポーネント)が同じだからということ

IEがなくなる時によっしゃーってなったのはEdgeが開発者がよく使うChromeと同じになったからか・・・
そしてSafariでなんか違うーってなることが多いのもこれか・・・

ネットワーク部分

HTTP1.1ではテキストベース

スクリーンショット 2025-03-19 19.20.57.png

スクリーンショット 2025-03-19 19.22.45.png

HTMLの解釈

HTMLの文字列からタグからトークンを作って、DOMツリーが作られる
スクリーンショット 2025-03-19 19.23.55.png

トークンはどうやって作成されている?(簡易版)

図では状態は4つだが本来は十数種類あるらしい
HTMLの仕様書に丁寧に書いてある(HTMLリビングスタンダード)
https://momdo.github.io/html/

スクリーンショット 2025-03-19 19.25.21.png

DOMツリーはどうやって作成される?

HTMLは規則(このタグの中にはこれを書けないor書ける)を扱いやすくするためこのような

スクリーンショット 2025-03-19 19.27.58.png

CSS

CSSもHTTMLと似たような解釈方法

スクリーンショット 2025-03-19 19.29.27.png

HTML + CSS = レイアウトツリー

レイアウトツリーで各要素の位置や大きさの情報も計算している

スクリーンショット 2025-03-19 19.30.35.png

JS

JSもHTMLやCSSのような感じ
たくさんツリー構造を作っている

全部でツリー構造4種類

4種類

  • HTML

    • DOMツリー
  • CSS

    • CSSOM
  • JS

    • ここはなんだったんだろう?
  • レイアウトツリー(DOMツリー + CSSOM)

書籍で作れるブラウザ

スクリーンショット 2025-03-19 19.32.00.png

1
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?