【JavaScript】処理が行われる順番について
サーバにリクエストし、htmlの情報がブラウザに届いてから表示されるまで、JavaScriptはどのように処理されるか。
- ブラウザがhtmlを読むと最初にWindowオブジェクトが生成されます。
windowオブジェクトは各ページまたはタブごとに生成されます。 - windowオブジェクトのプロパティとしてDocumentオブジェクトが生成され、htmlの中身を解釈してDOMツリーを構築しようとします。
Documentオブジェクトには、文書の読み込み状況を示す文字列を返すreadyStateプロパティがあり、このときreadyStateプロパティの値は最初の「loading」になっています。 - htmlは記述順にしたがって構文解析（パース）されて、Documentオブジェクトに要素オブジェクト（
<head>、<div>などの要素）やテキストノード（ブラウザ画面上に配置して表示できる文字列、改行、空白など）が追加されていきます。 - この時script要素があるとそのコードをパースし、エラーがなければそこでコードを同期実行します。
つまりJavaScriptが実行されるまでhtmlのパースは一時停止します。 - htmlの中身がすべてパースされてDOMツリーの構築が完了するとdocument.readyStateプロパティ値は「interactive」になります。
- ブラウザはDocumentオブジェクトに対してDOMツリーの構築完了を告げる「DOMContentLoaded」イベントを発生させます。
- img要素などの外部リソース（サブリソース）を読み込みます。
- すべての読み込みが完了した時点でdocument.readyStateプロパティ値は「complate」になります。
- 最後にブラウザはWindowオブジェクトに対してloadイベントを発生させます。
- ここからユーザー定義イベントなど様々なイベントを受けつけて、イベントが発生するとイベントハンドラが非同期で実行されます。
JavaScriptの同期処理と非同期処理について
非同期処理は同期処理と異なり処理が実行する準備をしている空き時間の間に、別の処理を実行することができます。
あくまで、準備している空き時間を活用しているだけなので、並列で複数の処理ができるわけではありません。
並列処理を行うためにはマルチスレッドで処理を実行する必要がありますが、JavaScriptはシングルスレッドで動きますので、並列処理ではなく、並行処理と言えます。
並列処理と並行処理の違いはこちらです。
- 並列処理
物理的に複数の処理を同時に実行することができる - 並行処理
常に1つの処理のみ実行しているが、タイミングを見計らって処理を切り替えて処理を効率よく実行する
JavaScriptはシングルスレッドのため、並行処理をしていることになりますね。
