それなりブログ

とあるWebエンジニアのそれなりのブログ、JavaScript/Node.js/Python/PHP/ゲーム作成 など

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

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内でも同期処理になるんですね。
知らなかった・・・。


コメントを残す

メールアドレスが公開されることはありません。

Categories

Archives