トッカンソフトウェア

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を実行



ページのトップへ戻る