Webフロントエンド ハイパフォーマンス チューニング

Webフロントエンド ハイパフォーマンス チューニング

Loading (リソースの読み込み)

• HTML CSS JS 画像などを読み込む（リソースの読み込み）

• Download、Parseの処理がある

• Download:HTMLを含む様々なリソースの読み込みが走る

Parse

• ダウンロードされたHTMLやCSSはDOMツリーやCSSOM（CSS Object Model）ツリーに変換される

• HTMLの場合はDOMツリーに、CSSの場合はCSSOMツリーに変換される

• DOMツリーがscriptタグ内のJavaScrptの内容に依存するように記載されていた場合、DOMツリーの構築がブロックされる

• CSSOMツリーはJavaScriptからもアクセスでき、LayoutやPaintingのフェーズでスタイルの計算に使用される

Spripting JavaScript実行

• レンダリングエンジンはJavaScriptのコードをJavaScriptエンジンに引き渡して実行させる。

• 字句解析→構文解析→コンパイル→実行

• JavaScriptのコードをトークン列をパースして抽象構文木を作成してコンパイルする

• JavaScriptの実行はDOMイベントが実行されてイベントリスナが起動するときにも発生する

Rendering

• レイアウトの計算

Paiting

• レンダリング結果の描画

レンダリングエンジン

レンダリングエンジンとは？

• ブラウザ内部で利用されるHTML描画エンジンのこと
• Webページのレンダリングのみを処理するソフトウェアコンポーネントのこと

ブラウザ名	レンダリングエンジン
Chrome	Blink
Firefox	Gecko
Safari	Webkit
IE	Trident
Edge	EdgeHTML
Opera	Blink

• BlinkはWebkitをForkして作成されているため処理が似ている

JavaScriptエンジン

JavaScriptエンジンとは？

• JavaScrpitの実行環境を提供するソフトウェアコンポーネントのこと

ブラウザ名	JavaScriptエンジン
Chrome	V8
Firefox	SpiderMonkey
Safari	Nitro
IE	Chakra
Edge	Chakra
Opera	V8

• V8エンジンはJITコンパイルを備えた高速なJavaScrptエンジンのこと。Node.jsでも利用されている。