JavaScript 起動順

今回はWeb画面を表示時にJavaScriptがどのような順番で実行するか確認してみます。

起動順

				
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScriptのテストページ</title>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">

console.log("head開始");

//画像も含めて全部読み込み時に実行
window.onload = function() {
	console.log("onload");
};

//画像も含めて全部読み込み時に実行
window.addEventListener("load",function(){
	console.log("load");
},false);


//テキスト読み込み時に実行
document.addEventListener("DOMContentLoaded",function(){
	console.log("DOMContentLoaded");
},false);

//jQueryの起動時処理
$(document).ready(function(){
	console.log("jquery.ready");
});

console.log("head終了");

</script>
</head>
<body>
JavaScript起動順のテスト
</body>
<script type="text/javascript">
console.log("bodyの後");
</script>

</html>

実行結果

				
head開始
head終了
bodyの後
jquery.ready
DOMContentLoaded
onload
load

頭から順番に実行していき、jQuery、DOMContentLoaded、onload(load)の順に初期化処理が呼ばれます。

onload、loadは宣言した順番で呼ばれます。

HTMLの頭から読み込み

↓

ドキュメント読み終わり

↓

jQuery、DOMContentLoadedを実行

↓

画像などを読み込み

↓

onload、loadを実行

複数定義できる？

				
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScriptのテストページ</title>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">

console.log("head開始");

//画像も含めて全部読み込み時に実行
window.onload = function() {
	console.log("onload");
};
window.onload = function() {
	console.log("onload No2");
};

//画像も含めて全部読み込み時に実行
window.addEventListener("load",function(){
	console.log("load");
},false);
window.addEventListener("load",function(){
	console.log("load No2");
},false);


//テキスト読み込み時に実行
document.addEventListener("DOMContentLoaded",function(){
	console.log("DOMContentLoaded");
},false);
document.addEventListener("DOMContentLoaded",function(){
	console.log("DOMContentLoaded No2");
},false);

//jQueryの起動時処理
$(document).ready(function(){
	console.log("jquery.ready");
});
$(document).ready(function(){
	console.log("jquery.ready No2");
});

console.log("head終了");

</script>
</head>
<body>
JavaScript起動順のテスト
</body>
<script type="text/javascript">
console.log("bodyの後");
</script>

</html>

実行結果

				
head開始
head終了
bodyの後
jquery.ready
jquery.ready No2
DOMContentLoaded
DOMContentLoaded No2
onload No2
load
load No2

window.onload = function()のみ2回目の定義で1回目が上書きされました。
window.onload 使用時は元のメソッドを上書きして消さないように注意してください。

ページのトップへ戻る