【Gecko / Blink】Webブラウザエンジンについて調べてみた

WEBブラウザを構成する技術について調べてみました。

WebBrowser

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