概要
HTMLファイルを読み込んでからブラウザに表示されるまでのJavaScriptの処理の流れをまとめました。
用語の確認
JavaScriptの処理順序
- windowオブジェクトの生成
- Documentオブジェクトの生成
- HTMLを記述順に構文解析(パース)
-
<script>要素を構文解析(パース), エラーがなければコードを同期実行 - HTMLパース完了
- 外部リソース読み込み
- ユーザー定義イベントなどのイベント発生
1. windowオブジェクトの生成
Q. windowオブジェクトとは？
A. 簡単に言えば、DOMを構築するDocumentオブジェクトをプロパティにもつオブジェクトのこと。詳しいことはMDNのWindowの説明を参考のこと。
下図の赤い着色部分にあたります。
2. Documentオブジェクトの生成
HTMLの中身を解釈してDOMツリーの構築を開始します。
下図の赤い着色部分にあたります。
Documentオブジェクトが他にどのようなプロパティをもっているか気になる方はMDNのDocumentインターフェイスのプロパティ一覧を参考のこと。
3. HTMLを記述順に構文解析(パース)
要素オブジェクト(<head>, <div>, ...), テキストノード(文字列, 改行, ...)を順に追加する。
簡単に言えば、以下のような木を作成する処理。
4. <script>要素を構文解析(パース), エラーがなければコードを同期実行
srcにJavaScriptファイルが指定されている場合、JavaScriptが実行されるまで, HTMLパースは一時停止します。
順序3の図で言えば、いま、<body>までパースが終わっており、<script>に差し掛かったとします。
<script>内のJavaScriptファイルを見つけた場合、JavaScriptファイルが実行されるまでは次の<h2>や<p>はパースされないということです。
5. HTMLパース完了
DOMツリーの構築が完了すれば、HTMLのパースは完了です。
このとき、DOMContentLoadedというイベントが発生します。
この時点でレンダリング(画面の表示)が開始されますが、画像やCSSなどのスタイルシートといった、外部リソースはまだ読み込まれていない可能性があります。
6. 外部リソース読み込み
順序5までで読み込まれなかった外部リソースの読み込みを行います。
すべての依存リソースが読み込まれるとloadというイベントが発生します。
7. ユーザー定義イベントなどのイベント発生
ボタンのclickなどのイベントの発生です。
参考・参照
・https://kde.hateblo.jp/entry/2017/05/20/212928
JavaScriptの処理順序について、非常に参考になりました。
・https://www.webdesignleaves.com/wp/jquery/1631/
本記事で利用されている図はこちらで作られていた物を再編したものです。