WEBブラウザを構成する技術について調べてみました。
Web Browser Engine
WEBブラウザの機能を大きく3つに分けます。
- Networking
- HTML Rendering Engine
- JavaScript Engine
今回はHTML Rendering Engine, JavaScript Engineについて。
HTML Rendering Engine
HTML Rendering Engineのフローです。
- HTMLを解析
– レキサー : 入力を有効なトークン(要素)に分割する
– パーサー : 言語の構文ルールに従ってドキュメントの構造を解析 - DOMツリーを構築
- CSSを解析してCSSのセレクタマッチング
– 文脈自由文法 - レンダーツリー(DOM ツリーのビジュアルな側面)を構築
- document.write等, jsでDOMが修正されるとDOMツリーを再構築, レンダーツリーのノードの幅・高さを計算(ReFlow, Layout)
- 描画を行う
主要なブラウザのHTML Rendering Engineは以下です。
- Gecko : Firefox
- Webkit : Safari
- Blink : Chrome, Opera (fork webkit)
- Servo : Android (in Rust)
Renderer
描画を行うソフトウェアです。
- moz2d : Firefox
- cairo : Firefox
- skia : Firefox、Chrome、Android、Blink
- vega : Opera
JavaScript Engine
JavaScript Engineは Node.js の V8 や SpiderMonkey が有名です。
- V8 (Chrome, C++)
- SpiderMonkey (Firefox, C)
- Nitro (safari)
[1] WEBブラウザの動作理解
[2] WEBブラウザの仕組み
[3] ブラウザにやさしいHTML/CSS