レンダリングの工程 Parse / Scripting

こんにちはKOです。
今回はレンダリングの工程について
その中でもParseについて、学んだ事を記述していこうと思います。

前回：レンダリングの工程について〜その１ Download　 〜

Parse

パースは、ダウンロードで取得したリソース(html ,css ,javascript ,画像)を
レンダリングエンジンが読みとり易い内部表現に変換する事です。

その内部表現として
html → DOMツリー
css → CSSOMツリー
にそれぞれ生まれ変わります。
それらは次のRendaring Paing に利用されます。

HTTPレスポンスとして返されるHTMLは、以下の工程を経てDOMツリーへと変換されます。

1 字句解析によるトークンのリスト化
2 公文解析による構文木の構築
3 構文木内にあるJavaScriptを実行しつつDOMツリーの構築

「レンダリングエンジン」が受け取ったHTMLを字句解析し、
トークン化を行います。

トークンとは意味的に一つの塊になっている文字列です。

構築中にもしjavascriptがあれば、同期的に実行されます。もし下記のように <script>タグがあれば、document.white('Hello Japan')を実行して、その後に構築を再度スタートします。

要はDOMを構築している間にscriptタグを見つけると、
DOMツリーの構築をストップしてscript要素内のJavascriptを実行するのです。
これはパフォーマンスの点では厄介なので避けましょう！！

・DOMツリー
https://ja.javascript.info/dom-nodes

Scripting

次は Scriptingについてです。

リソースを一式読み込んだ後、JavascriptのコードをJavascriptエンジンに引き渡して実行します。
一般的なJavascriptエンジンの実行の流れは以下のような形をとります。

字句解析はJavascriptのコードを読み解いて、一つ一つのもじにラベル付けを行います。
ラベル付けをすると、そのラベルを元に抽象構文木を生成します。
その抽象構文木をコンパイルすることで初めて、
実行可能なJavascriptコードへと生まれ変わります。

コンパイルの処理の流れは、Javascriptエンジンの種類にもよるんだそうです。

・JITコンパイル
JITコンパイラはプログラミング言語の実行環境の機能の一つで、
ソースコード、や中間コードから機械語への変換処理を実行直前にまとめて行なう機能のこと。
Just In Time コンパイラとも呼びます。

ソースコードを実行時に逐次的に変換しながら実行するインタプリタ型言語（スクリプト言語）や、
仮想マシン（VM：Virtual Machine）が中間コードを解釈して実行する方式の言語（Javaなど）で、
実行時の性能を向上させるために導入されています。

プラットフォームに依存しない形式でプログラムを配布し、実行時にその環境に合ったコードに変換されるという利点は保ったまま、
開発時にコンパイラで機械語に変換する場合とほとんど変わらない実行速度を得ることができます。

ただし、実行開始時に変換処理の分だけ待ち時間が生じるのと、
変換後のコードを保存しておく必要からメモリ消費量が増えるという欠点もあります。

・インタプリタ型言語
(JavaScript Python Ruby PHP など)
→コンパイルを必要としない言語のことです。
通常、ソースコードをコンパイルして機械語に直し、機械語をビルドして実行しないといけません
(先ほど説明したコンパイラ言語のことです。)
それに対してインタプリタ言語はコンパイル〜ビルドなどといった過程をすっぽかして実行することができます。
コンパイル言語に比べて実行スピードが遅いのがデメリットとして挙げられます。

(コンパイラ言語の代表例：
Jave C# C/C++ Rust など)

実行

そして最終的に実行可能な形式にコンパイルされたJavascriptのコードは、
処置系内部の仮想マシン、もしくはCPUで実行されます。
また、JavaScript内ではDOM APIを通じてDOMツリー操作することができます。
操作すると、Renderingフェーズ、Paintingフェーズを引き起こします。
またAjaxを利用して外部のリソースを取得するとLoadingフェーズを再度引き起こします！

今回はParse~Scriptingについてのおさらいでした。
次はRenderingについて軽くまとめていこうと思います！