Secrets of the JavaScript Ninja 2nd 読書メモ 第2章 実行時にページを組み立てる

クライアントサイドWebアプリケーションのライフサイクル

1. ユーザがブラウザのアドレスバーにURLを打ち込む
2. ブラウザがリクエストを生成してサーバに送信する
3. サーバがクライアントにレスポンスを返す
4. ブラウザがHTML/CSS/JavaScriptを処理して最終的なページを組み立てる
5. ブラウザがイベントキューを監視してイベントに応答できるようにする
6. ユーザがページの要素を操作する
7. ユーザがWebアプリケーションを閉じる

ページの組み立てのフェーズ

1. HTMLを構文解析して、DOMを組み立てる
2. JavaScriptコードを実行する

※JavaScriptエンジンは、script要素を見つけると、そこでDOMの組み立てを一時停止してJavaScriptを実行する。そのため、script要素がHTMLの途中にあり、読み込みや実行に時間がかかると、ブラウザの描画が停止してパフォーマンスが悪化して感じられる。script要素はbody要素の末尾に置くべきである。

イベントの取り扱い

クライアントサイドのWebアプリケーションはGUIアプリケーションなので、ユーザーの様々な操作（イベント）に反応する必要がある。

イベントハンドリングの概要

ブラウザの実行環境はシングルスレッドの実行モデルである。イベントは単一のキューに入れられ、上から順に1つずつ処理される。

イベントハンドラを登録する

イベントハンドラの登録には以下のいずれかの方法が使用できる。

// 特殊なプロパティに関数を代入する
window.onload = function(){};

// addEventListener メソッドの使用
document.body.onclick = function(){};

プロパティへの代入は、一度に一つのイベントハンドラしか登録できない。複数登録したい場合はaddEventListenerを使う必要がある。