はじめに
「JavaScriptはどうやって実行されているのか」という疑問を初学者なりにまとめた内容です。記述については触れません。
JavaScriptの特徴
まず、特徴としては「クライアントサイドでの動作が可能」「ページの動的な機能を追加できる」「プログラミング言語としての柔軟性が高く、多くのライブラリやフレームワークが利用可能」といったものが上げられます。
一方で、「ブラウザ間での差異がある」「セキュリティリスクがある」「クライアントサイドでの実行なため、パフォーマンスに影響がある可能性がある」という気をつけるべき点も持っています。
JavaScriptの処理の流れ
- windowオブジェクトの生成
- Documentオブジェクトの生成
- HTMLを記述順に構文解析(パース)
- script要素を構文解析, エラーがなければコードを同期実行
- HTMLパース完了
- 外部リソースの読み込み
- ユーザー定義イベントなどのイベント発生
1. windowオブジェクトの生成
ブラウザ上でのJavaScriptの実行コンテキストを表すグローバルオブジェクトです。windowオブジェクトは、ページが読み込まれた際に自動的に生成され、その下にはブラウザ上で表示されているページの全ての要素がプロパティとして定義されます。
例えば、documentオブジェクトやconsoleオブジェクトなども、全てwindowオブジェクトのプロパティとして定義されています。また、JavaScriptでグローバルスコープで定義された変数や関数も、自動的にwindowオブジェクトのプロパティとして定義されます。
2. Documentオブジェクトの生成
現在のページに対応するDOMを表すオブジェクトです。Documentオブジェクトは、ページが読み込まれた際に自動生成され、ページの構造や内容をJavaScriptから操作できるようにするインターフェースを提供します。
Documentオブジェクトには、ページに含まれる全ての要素にアクセスするためのメソッドやプロパティが用意されており、JavaScriptからページの要素を取得したり、要素の属性を操作したり、新しい要素を作成したりできます。また、Documentオブジェクトには、ページの読み込み状態を取得するメソッドや、ページ内でのイベント登録や削除を行うメソッドなども用意されています。
3. HTMLを記述順に構文解析(パース)
ブラウザはHTML文書を読み込み、解析してDOMツリーを構築することでページ構造を把握します。この処理をHTMLパース（構文解析）と呼びます。
HTMLを記述順に構文解析するためには、ブラウザはHTML文書を上から下まで一行ずつ読み込みます。HTMLパーサーは、HTML文書のタグや属性、テキスト、コメントなどを認識して、DOMツリーのノードに変換するプログラムです。
HTMLの文法には、文法上正しくないコードが含まれることがあります。ブラウザは正しくないコードに対しても、エラーが発生することなく処理を続けるように自動的に修正を加えることがあり、このパートでブラウザはHTML文書を解析して、文法上正しいDOMツリーを構築しています。
4. script要素を構文解析, エラーがなければコードを同期実行
scriptに差し掛かると、JavaScriptエンジンはscript内のコードを解析して実行します。
この時にscript要素のsrc属性がある場合、指定されたURLからJavaScriptファイルを取得して(JavaScriptのコードが直接書かれている場合、その記述も含めて)実行します。
script内のコード実行が終わるまで、HTMLパーサーの処理は一時停止します。
例えば、bodyまでパースが終わっており、scriptに差し掛かったとします。script内のJavaScriptファイルを見つけた場合、JavaScriptファイルが実行されるまでは、h2やpはパースされないということです。
5. HTMLパース完了
DOMツリーの構築が完了すれば、HTMLのパースは完了です。これで、JavaScriptの実行やCSSスタイルを適用したりするための基礎が整います。
6. 外部リソースの読み込み
HTMLのパースが完了すると、ブラウザはHTML内にあるすべてのリソースを読み込むために、必要なHTTPリクエストを送信します。画像、スタイルシート、JavaScriptファイルなどです。これらのリソースの読み込みが完了すると、ブラウザはそのページの表示を完了します。
ただ、外部リソースの読み込みには時間がかかるため、HTMLのパースと同時に読み込まれるわけではないです。必要であれば非同期で読み込みます(レンダリングブロックを考慮したリソースの読み込み)
すべての依存リソースが読み込まれるとloadというイベントが発生します。
7. ユーザー定義イベントなどのイベント発生
ページに存在するJavaScriptコードが順次実行されます(clickやkeydownなど)。イベントが発生すると、JavaScriptエンジンがイベントハンドラーを実行します。ここでボタンのclickなどのイベントの発生です。
※イベントハンドラー : イベントを処理する関数