ブラウザレンダリングの仕組みについてメモ(Part1)

ブラウザ内部の処理、とくにレンダリングエンジンの処理の流れについて自分用に整理した単なるメモです。

gihyo.jp

レンダリングエンジンの処理の流れ

大まかには次のようなプロセスをたどるのかなと自分は整理しています。

  • リソースのダウンロード
  • リソースのパース
  • レンダリングツリーの構築
  • 描画

ここから各工程についてメモっていきますが、今回はリソースのパースまで書こうと思います。

リソースのダウンロード

まずそもそもここで言ってるリソースというのは、ブラウザが扱うリソースのことで、HTML、CSS、JavaScript、画像ファイルのことを指しています。

リソースのダウンロードはサーバからHTMLなどのリソースを取得する工程で、ネットワークプロトコル（例えばHTTP)を使用してリソースを取得します。

（まあこのあたりはイメージしやすいのかな。）

より詳しく言及するとなると、HTTPの話になりそうで、レンダリングエンジンの話とは少し離れていく気がするので、これぐらいにしときます。

リソースのパース

リソースのパースはダウンロードしたリソースを構文解析(parse)して、レンダリングエンジンの内部表現に変換する処理のことです。

各リソースはレンダリングの実装に沿って内部表現に変換されていきます。

例えば、HTMLはDOMツリー、CSSはCSSOMツリーに変換されます。

DOM(Document Object Model)ツリーの構築

DOMとはHTMLのドキュメントを表現するオブジェクトのことで、 DOMツリーとはDOMを木構造として表現したもの。

詳しい説明はこのあたりでしょうか。

ダウンロードしたHTMLは以下の流れでDOMツリーへと変換されていきます。

トークンとは意味的に1つの塊になっている文字列のことで、 トークンを列にしたあとは構文木(木構造のデータ)を構築していきます。

構文木を構築したあとにDOMツリーを構築していくわけですが、構文木内にJavaScriptが含まれている場合は、その都度JavaScriptが実行されます。

JavaScriptの実行

JavsScriptの実行の流れとしては主に以下の流れ。

  1. 字句解析
  2. 構文解析
  3. コンパイル
  4. 実行

コンパイラの一般的な処理の流れと同じですね。

字句解析によりJavaScriptのコードをトーク列に変換し、 構文解析によりコンパイル可能な形式である抽象構文木に変換します。

どのようにコンパイルされるかはJavaScriptエンジンに依存しています。

JavaScriptエンジン - Wikipedia

JavaScriptエンジンで多いのはJITコンパイル型の実装のようです。

最後に、コンパイルされたコードは内部の仮想マシンやCPUで実行されます。

まとめ

とりあえずレンダリングエンジンの処理の流れをインプットして、レンダリングツリーの形式へ構築されるそれまでの前段工程をまとめてみました。

高度なチューニングやデバックなどはレンダリングエンジンの基本的な処理を抑えないと手が進まないので、深堀して整理したいと思いました。

とりあえず今回はここまで。