createElement(“script”)で生成したjavascriptは実行順序が保証されませんよって話。
まあ知ってる人は知ってると思うのですが、知らない人はやってしまうかもしれないのでとりあえず書いときます。
scriptタグでの記述
scriptタグでJavaScriptの読み込みを記述している場合に記述かれた順序で実行されます。
http://labs.setunai.net/jsload/test1.html
test1.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
var _arr = [];
</script>
<script type="text/javascript" src="a.js.php"></script>
<script type="text/javascript" src="b.js"></script>
</head>
<body>
<p>headタグにて読込</p>
</body>
</html>
a.js.php
<?php
sleep(3);
?>
_arr.push('a');
b.js
_arr.push('b');
a.js.phpは3秒だけ遅延してjsのコードを出力します。
画面が表示されたら_arrの中を確認します。
chromeならデベロッパーツールのConsole、FirefoxならFirebug、IEなら開発者ツールのスクリプト＞コンソールで中身が確認できます。
a.js.phpの3秒遅延もちゃんと待ってくれて、記述された通りに実行され[“a”, “b”]となります。
ちなみに読み込み自体はb.jsの方が先に終わってます。実行がまだなだけです。
createElement(“script”)での記述
createElement(“script”)での場合には読み込まが完了した順序で実行されます。
http://labs.setunai.net/jsload/test2.html
test2.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
var _arr = [];
var s_a = document.createElement("script");
s_a.src = "a.js.php";
document.getElementsByTagName("head")[0].appendChild(s_a);
var s_b = document.createElement("script");
s_b.src = "b.js";
document.getElementsByTagName("head")[0].appendChild(s_b);
</script>
</head>
<body>
<p>jsで動的読込</p>
</body>
</html>
a.js.phpとb.jsは同じ物を利用しています。
結果はこちら
a.js.phpは先に読み込み処理が発生しますが3秒待ってしまうので後から読み込み処理が発生したb.jsの方が先に読み込みを完了します。
ですので上記の通り[“b”, “a”]となります。
各ブラウザで確認しましたが、どれも同じ結果となりました。
知らなかった人は気をつけましょう。
※検証ブラウザ
chrome 17.0.963.79
Firefox 11.0
IE 8.0