JavaScript起動方法と起動順序 - mttn572のプログラミングメモ

JavaScriptを起動する方法は幾つかありますが、どの起動が早いのか試してみました。
(IE6,7,8では動作しません。動作確認してみたい場合はutf-8でファイルを保存してください)

launch_test01.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JavaScript起動テスト</title>
<script src="js/launch_test01.js"></script>
</head>
<body>
<div id="sample01">div="sample01"のdivタグですよ</div>
</body>
</html>

js/launch_test01.js

document.addEventListener("DOMContentLoaded",function(){
    alert('1番目に実行されました。');
    var test = document.getElementById('sample01');
    alert(test.innerHTML);
},false);

window.onload = function() {
    alert('2番目に実行されました。');
    var test = document.getElementById('sample01');
    alert(test.innerHTML);
}

window.addEventListener("load",function(){
    alert('3番目に実行されました。');
    var test = document.getElementById('sample01');
    alert(test.innerHTML);
},false);

DOMContentLoadedはDOM構築が終わった直後に実行されるので早いです。
window.onloadは画像の読み込みが終わるまで待つので遅いです。(この例では画像は無いですが)

次にjQueryのready(fn)が早いとの事なので試してみました。

launch_test02.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JavaScript起動テスト</title>
<script src="js/jquery.js"></script>
<script src="js/launch_test02.js"></script>
</head>
<body>
<div id="sample01">div="sample01"のdivタグですよ</div>
</body>
</html>

js/launch_test02.js

$(document).ready(function(){
    alert('1番目に実行されました。');
    var test = document.getElementById('sample01');
    alert(test.innerHTML);
});

document.addEventListener("DOMContentLoaded",function(){
    alert('2番目に実行されました。');
    var test = document.getElementById('sample01');
    alert(test.innerHTML);
},false);

window.onload = function() {
    alert('3番目に実行されました。');
    var test = document.getElementById('sample01');
    alert(test.innerHTML);
}

window.addEventListener("load",function(){
    alert('4番目に実行されました。');
    var test = document.getElementById('sample01');
    alert(test.innerHTML);
},false);

確かにjQueryのready(fn)が一番早いです(実装順序を変えても動作に変更なし)。

普通のプロジェクトで使う場合は、ブラウザ非依存で安定のready(fn)ですが、
jQueryを使わないような簡単なサンプルコードの動作確認には、同じくブラウザ非依存のwindow.onloadを使っています。
document.addEventListenerは古いIEでは動かないのと、コード量がちょっとだけ多いのでほぼ使ってません。。

参考にしたサイト

■JavaScript メモ / チップス attachEvent() と addEventListener() [ ARTEMIS ] http://www.artemis.ac/contents/javascript/jsmemo6.htm

■javascript - element.onload vs element.addEventListener("load",callbak,false) - Stack Overflow http://stackoverflow.com/questions/6902033/element-onload-vs-element-addeventlistenerload-callbak-false

■HTML4から変化したHTML5のマークアップ　ここが違う！サンプルで見るHTML5（2）（1/3）：CodeZine http://codezine.jp/article/detail/5600