苦学楽学塾

　JavaScriptの<script>～</script>の記述ですが、なるべく</body>タグの直前に置くようにして、HTMLファイルが全部読み込まれDOMツリーが構築された後に、JavaScriptが動作するようにするべき、と書いてあるウェブサイトが多くあります。仮に、<head>～</head>の中で、DOMを操作するquerySelectorのようなメソッドを用いると、<body>以降が読み込まれていないために呼び出そうとするセレクタがまだ存在せず、エラーを起こす恐れがあります。ですが、どうしても、外部の大きなライブラリをロードしたり事前準備のようなことをする場合、どうしても<head>～</head>にJavaScriptを置きたいこともあります。

　HTML読み込み中に、<script>が来ると、通常、ブラウザは一旦HTMLの読み込みを中断して、JavaScriptの読み込みに移ります。</script>に到達しJavaScriptの読み込みが完了すると、JavaScriptは動作を始め、JavaScriptが終了した後に、HTMLの残りの部分の読み込みが始まります。このJavaScriptの動作に時間がかかると、ユーザーは画面に何も表示されない状態で待たされることになります。

　実は、<script>のときに、HTMLの読み込みを中断せずに、JavaScriptの読み込みとHTMLの読み込みを同時並行で行うようにブラウザに指示することが可能です。HTMLファイルと同じ場所に置かれたJavaScriptの大きなライブラリjslib.jsを読み込むような場合、

として、<script>にasync属性を付けると、jslib.jsの読み込みと並行してHTMLの読み込みが行われ、jslib.jsの読み込みを待たずにウェブサイトの表示が始まり、ユーザーを待たせずにすみます。

　ですが、ライブラリのようにロードだけで実行されないものはよいのですが、マウス操作のイベントハンドラの登録をしたい場合など、HTMLの読み込み完了前にイベントハンドラが起動してしまうと、期待通りの動作をしない可能性が出てきます。そこで、JavaScriptの起動をHTMLの読み込み完了まで待たせる必要がある場合には、

として、<script>にdefer属性を付けます。こうしておくと、<head>～</head>内に<script>～</script>を置いても、このJavaScriptは、HTML読み込み完了後に起動します。また、HTML読み込み完了を告げるDOMContentLoadedというイベントがJavaScript動作後に発生し、このイベントハンドラの中でマウスのイベントハンドラの登録を行えば、HTML読み込み完了前にマウスのイベントハンドラが動作開始してしまうといった問題を防ぐことができます。また、defer属性を付けると、<head>～</head>内に複数の<script defer>～</script>を置く場合に、JavaScriptが、出てくる順に動作することが保証されます。

	苦学楽学塾
	－JavaScriptの読み込み－