クリティカル レンダリング パス
https://coliss.com/wp-content/uploads-201701/2017021802-00.png
01. DOMツリーの構築
CSSやJS以外のhtmlをパース
02. CSSOMツリーの構築
CSSをパース
DOMとCSSOMを完全にパース終えるまでレンダリングが開始されない。
それを「レンダー ブロッキング リソース」と呼ぶ。
03. JavaScriptの実行
scriptタグにある内容を実行していく。
01のDOMツリーをパースし、scriptタグが発見されると、
中身を実行する。そのため、DOMツリー構築がストップする。
「パーサ ブロッキング リソース」と呼ばれる。
01,02をパースしつつ、scriptがあれば止まる。
01,02,03が終わると、04に進む。
04. レンダリング ツリーの作成
目に見える部分のみ(display:none以外)レンダリングツリーを
構築していく。最終的に画面に表示されるツリーになる。
05. レイアウトの生成
viewpointなどのサイズを決定する。
06. ペインティング
コンテンツを描写していく。
最適化するための簡単なtipsは、
にあるように「ファーストビューに使われるCSS,JSはインラインで書き、それ以外はフォースとビュー以外の最後で読み込むようにする」
(レンダリングの上記手順は、DOMを上位階層から順位パースしていって、
CSS,JS,HTMLが整った時点でレンダリングするっぽいね。)