[JS] headタグ内のJSは外部JSファイルの読み込みを待つ

2008年4月30日

JavaScriptで
Hello Worldより前のレイヤの話の気がするんだけど、イマサラ知ったこと
件名の通りですが、以下サンプルコード

index.html

<html>
<head>
<script type="text/javascript" src="./outerjs.php"></script>
<script type="text/javascript"><!--
// foo変数はouterjs.phpの出力内で定義されている
alert(foo);
// --></script>
</head>
<body>
</body>
</html>

outerjs.php

<?php
sleep(20);
echo 'var foo = "HELO!";';

上記のindex.htmlを叩くと
律儀に20秒待ってから（＝外部JSファイルの読み込みを待ってから）alertが上がる！
・・・今まで、なんとなくでしか知らなかったんだぜ？

ちなみに、scriptタグの上下を逆にするとエラーになるので、上から順に読み込むよう。（詳細未確認）

逆に、Webサイトのパフォーマンスを上げるためには
可能な限りscriptタグは後に書くようにすれば、パフォーマンスは上がりますね、って
『ハイパフォーマンスWebサイト』に書いてあったって、yoshukiさんが言ってましたマル

【追記】
別にhead内じゃなくてbody内でも同期処理になるんですね。
知らなかった・・・。