taquaki-satwo
11/25/2017 - 4:12 PM
レンダリング順序
レンダリング順序
| ブラウザ | HTML | CSS | JavaScript |
|---|---|---|---|
| Windowオブジェクトの生成 | |||
| Documentオブジェクトの生成 | |||
| document.readyStateプロパティをloadingにする | |||
| HTML構文解析 | CSS構文解析 | script要素構文解析（レンダリングブロック、同期実行） async属性でレンダリングをブロックせずに構文解析（非同期実行） | |
| DOMツリー構築 | スタイ規則の生成 | ||
| レンダリングツリーの生成 | |||
| レイアウトの生成 | |||
| document.readyState = interactive | |||
| DOMContentLoadedイベント発生 | defer属を設定したscriptが実行される | ||
| 外部リソースの読み込み | |||
| document.readyState = complete | |||
| Windowオブジェクトloadイベント発生 | |||
| イベントハンドラの呼び出し |