プログラミング言語や環境設定を中心としたパソコン関連の技術メモです。
主にシステム開発中に調べたことをメモしています。TIPS的な位置付けで、気が向いたときにちまちま更新していきます。
JavaScript、ページを表示した際(onload時)に行う処理の実行順序について。
結論から書くと

・HTMLファイル内にJavaScriptコードをべた書きすると、記述が読み込まれた時点で実行される
・「$(document).ready()」と「window.onload」はページが全部読まれてから実行される
 (厳密には微妙に違いますが、気にしなくて良いです)
・「$(document).ready()」が全部実行されてから「window.onload」が実行される
・「$(document).ready()」は書いた順番に上から全部実行される
・「window.onload」は最後に書いたもののみが実行される
・ブラウザによって挙動が違う場合がある

となります。

それでは詳細を書いていきますね。

素朴な疑問ですが、ふと、ページ表示時のJavaScriptの実行順序が気になりました。
私は基本的にjQueryを使って

$(document).ready(function(){
    ほげほげ
});

のような書き方をするのが常なのですが、他にもwindow.onloadを使って

window.onload = function(){
    ほげほげ
}

のように書いたり、bodyタグの属性として

<body onload="hoge_func()">

のような書き方をすることもできます。
あるいは

<SCRIPT language="JavaScript">
<!--
alert("ほげ");
//-->
</SCRIPT>

のような形で、ヘッダ部やボディ部にそのまんまべた書きすることも可能です。

これらのやり方が混在してたら、実行順序はどーなるんだ(--?と気になったのです。
迷ったら即実験です。

こんなテストコードを用意して実行してみましたφ(--)

■test.js
// $(document).ready()
$(document).ready(function(){
    $("#result_area").html($("#result_area").html() + "別ファイル:$(document).ready()<br>");
});

// $(document).ready()その2
$(document).ready(function(){
    $("#result_area").html($("#result_area").html() + "別ファイル:$(document).ready()2<br>");
});

// onload時に呼び出される関数
function onload_func(){
    $("#result_area").html($("#result_area").html() + "body onload=\"onload_func()\"時の処理<br>");
}

// window.onload
window.onload = function(){
    $("#result_area").html($("#result_area").html() + "window.onload時の処理<br>");
}
// window.onloadその2
window.onload = function(){
    $("#result_area").html($("#result_area").html() + "window.onload時の処理2<br>");
}

■test.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>onload時の挙動テスト</title>
    <script src="./js/jquery-1.11.2.min.js"></script>

<SCRIPT language="JavaScript">
<!--
// 同じファイル:ヘッダ部:$(document).ready()
$(document).ready(function(){
    $("#result_area").html($("#result_area").html() + "同じファイル:ヘッダ部:$(document).ready()<br>");
});
//-->
</SCRIPT>


    <script src="./js/test.js"></script>

<SCRIPT language="JavaScript">
<!--
// 同じファイル:ヘッダ部:$(document).ready()その2
$(document).ready(function(){
    $("#result_area").html($("#result_area").html() + "同じファイル:ヘッダ部:$(document).ready()2<br>");
});
//-->
</SCRIPT>


</head>
<body onload="onload_func()">

<SCRIPT language="JavaScript">
<!--
// 同じファイル:ボディ部:$(document).ready()
$(document).ready(function(){
    $("#result_area").html($("#result_area").html() + "同じファイル:ボディ部:$(document).ready()<br>");
});
//-->
</SCRIPT>


<SCRIPT language="JavaScript">
<!--
// ボディ部ベタ書き:そのまんま
$("#result_area").html($("#result_area").html() + "ボディ部そのまんま<br>");
//-->
</SCRIPT>


<div id="result_area"></div>

<SCRIPT language="JavaScript">
<!--
// 同じファイル:ボディ部:$(document).ready()その2
$(document).ready(function(){
    $("#result_area").html($("#result_area").html() + "同じファイル:ボディ部:$(document).ready()2<br>");
});
//-->
</SCRIPT>


<SCRIPT language="JavaScript">
<!--
// ボディ部ベタ書き:そのまんま2
$("#result_area").html($("#result_area").html() + "ボディ部そのまんま2<br>");
//-->
</SCRIPT>


<SCRIPT language="JavaScript">
<!--
// ボディ部ベタ書き:そのまんま3
$("#result_area").html($("#result_area").html() + "ボディ部そのまんま3<br>");
//-->
</SCRIPT>


</body>
</html>

ご自分で試される方は、別途jQueryのファイルを用意してくださいね。
※jQueryはhttp://jquery.com/からダウンロードできます。

このテストコードを実行したところ、以下のような結果になりましたφ(--)
※IE8以外は2015/01/11時点の最新版です

■Internet Explorer 8
ボディ部そのまんま2
ボディ部そのまんま3
同じファイル:ヘッダ部:$(document).ready()
別ファイル:$(document).ready()
別ファイル:$(document).ready()2
同じファイル:ヘッダ部:$(document).ready()2
同じファイル:ボディ部:$(document).ready()
同じファイル:ボディ部:$(document).ready()2
body onload="onload_func()"時の処理

■Google Chrome
ボディ部そのまんま2
ボディ部そのまんま3
同じファイル:ヘッダ部:$(document).ready()
別ファイル:$(document).ready()
別ファイル:$(document).ready()2
同じファイル:ヘッダ部:$(document).ready()2
同じファイル:ボディ部:$(document).ready()
同じファイル:ボディ部:$(document).ready()2
window.onload時の処理2
body onload="onload_func()"時の処理

■Firefox
ボディ部そのまんま2
ボディ部そのまんま3
同じファイル:ヘッダ部:$(document).ready()
別ファイル:$(document).ready()
別ファイル:$(document).ready()2
同じファイル:ヘッダ部:$(document).ready()2
同じファイル:ボディ部:$(document).ready()
同じファイル:ボディ部:$(document).ready()2
body onload="onload_func()"時の処理

■Safari(Windows)
ボディ部そのまんま2
ボディ部そのまんま3
同じファイル:ヘッダ部:$(document).ready()
別ファイル:$(document).ready()
別ファイル:$(document).ready()2
同じファイル:ヘッダ部:$(document).ready()2
同じファイル:ボディ部:$(document).ready()
同じファイル:ボディ部:$(document).ready()2
body onload="onload_func()"時の処理

■Opera
ボディ部そのまんま2
ボディ部そのまんま3
同じファイル:ヘッダ部:$(document).ready()
別ファイル:$(document).ready()
別ファイル:$(document).ready()2
同じファイル:ヘッダ部:$(document).ready()2
同じファイル:ボディ部:$(document).ready()
同じファイル:ボディ部:$(document).ready()2
body onload="onload_func()"時の処理

細かい部分は頑張って見ていただくとして、
基本的な挙動は以下の通りでした。

・JavaScriptを記述する場所が別ファイルか同じファイルかは無関係
 別ファイルに記述した場合、JavaScriptファイルを読み込んでいるところに挿入される

・べた書きはその記述部分が読み込まれた時点で実行する
 ※「ボディ部そのまんま」が表示されていないのは、
  実行時点でまだID「result_area」の要素が読み込まれていないのが原因

・「$(document).ready()」と「window.onload」はページ全体の読み込み後に実行される
 ※厳密には違いがあるので、興味がある方は頑張って調べてください

・「$(document).ready()」と「window.onload」では「$(document).ready()」が先に実行される
 「$(document).ready()」が全部実行し終わった後に「window.onload」が実行される

・「$(document).ready()」は記述した順にすべて実行される
 同じファイル or 別ファイル、ヘッダ部に記述 or ボディ部に記述は関係無し
 とにかく上から順番に実行される

・「window.onload」は最後に記述したもののみ実行される
 同じファイル or 別ファイル、ヘッダ部に記述 or ボディ部に記述は関係無し
 とにかく一番最後(一番下)に記述されたものが実行される

・「window.onload」と「<body onload="ほげ">」は基本的には同じ扱い
 2015/01/11時点のGoogle Chromeでのみ別扱いになるっぽい

ふむふむ、大体予想通りです。

……が、Google Chromeの挙動のみ想定外でした。
天下のGoogle様とあろうものが、まさか独自路線を突っ走っているとは。

実行タイミングが違うので仕方ない部分はあるでしょうが、
できるだけ記述は混在させない方が良さ気ですね。
「$(document).ready()」なら「$(document).ready()」、
「window.onload」な「window.onload」だけ使うように意識してあげてください。

そんな感じ\(--)/
スポンサーリンク
 
このエントリーをはてなブックマークに追加 

category:● JavaScript  thema:パソコンな日々 - genre:コンピュータ  Posted by ササキマコト 

  関連記事