Javascriptの読み込む位置と実行タイミング

Javascriptの勉強中で、Javascriptがどんなタイミングで実行されるのか調べてみました。

よく使われるのは次の3パターン
1.ページが全て読み込まれてから実行
2.ページのHTMLが読み込まれてから実行
3.ページの読み込み開始と同時に実行

「1.ページが全て読み込まれてから実行」
2種類あります。
・bodyタグのonload
・Javascript内に window.onload

例
<body onload=”testscript();”>

例
window.onload = testscript;

画像などすべての要素の読み込みが完了してからスクリプトを実行するため、全てのページ要素に処理が行えます。
しかし一番最後になるので大きな画像など読み込みが遅いと完了するまで実行しないので待機する事になります。

「2.ページのHTMLが読み込まれてから実行」
・bodyタグの最後に記述します。

例
<body>
ページの内容
<script type=”text/javascript”>
testscript();
</script>
</body>

HTMLが読み込まれた時にスクリプトを実行するため、読み込み中の要素にアクセスできませんが
onloadに比べ早い段階で実行されるので待機時間が短くなります。
もっと細かく言えばbodyタグの最後でなくても、必要な要素が揃った後すぐに書いてもOKです。

「3.ページの読み込み開始と同時に実行」
・headタグ内に記述

例
<head>
<script type=”text/javascript”>
testscript();
</script>
</head>

読み込みが完了してない要素を処理しようとするとエラーの元になるので注意。
一瞬で読み込みが完了する高速な回線やキャッシュが有効の時にはエラーが出ないけど、無線LANなどにするとエラーが出る場合は、読み込みが完了してない要素を処理しようとしてる可能性があります。

スタンダードなのは、ここでは関数(function)を読ませるだけで実行せずに、1や2など任意のタイミングで関数を実行します。

2番・3番は外部Javascript(.jsファイル)「<script type=”text/javascript” src=”test.js”></script>」などでも同様に利用できます。