クライアントサイドのjavascriptの実行順について

javascriptがブラウザ上で実行される実行順についてまとめます。

全てのブラウザ、全ての場合に下記のような実行順が保証される訳ではなく、
ブラウザがHTMLやjavascript、その他、ブラウザ上に読み込まれるコンテンツをローディング、解釈、表示(出力)などを行う場合の参考の実行順として考えることができます。

また、HTMLパーサもブラウザごとのバージョンにより挙動が細かく変わるので、一概に実行環境を固定して考えることは、現実的ではないと考えられます。

さらにjavascriptのフレームワーク固有の挙動の違いもあるので、それぞれの実行順はプログラムを書いて確かめてみることがベストと思います。

• 1.ブラウザの起動と同時に、Documentオブジェクトが作られる。
  HTML要素、テキスト、の解釈
  ドキュメントに対してElement、Textを追加。
• 2.インラインスクリプト(HTMLタグ内に記述したjavascript)や、外部javascriptスクリプト(の読み込み指定がある場合)を実行する。
  この時の実行は同期実行される。
• 3.HTMLパーサはasync属性が設定された＜script＞要素を解釈するときは、スクリプトのダウンロードを開始、ドキュメントの解釈も開始、
  このとき、HTMLパーサはダウンロードや、解釈を待たない。
• 4.defer属性が設定されたスクリプトがドキュメント中に記述された順で実行される。
  非同期で実行されるスクリプトもある。
• 5.ドキュメントが解釈できたら、Documentオブジェクトに対して、DOMContentLoadedイベントが発生。
  プログラム実行は非同期イベントドリブンの状態になる。
• 6.ブラウザが全て読み込み完了した後、Windwosオブジェクトに対してloadイベントを発生させる。
  この時、サイズの大きい画像や、その他のファイルが引き続きローディング中になる場合もある。
• 7.上記までの処理が完了した後、ユーザの入力や操作によるイベント、時間経過等によるイベントハンドラが非同期で呼び出される。