defer属性の挙動

JavaScript

久しぶりに更新。

defer属性の挙動について、ふと気になったので調べる。

defer属性はのっぺりひらたく言うと、スクリプトの実行を延期させるようにすること。
最近はパフォーマンスを改善するのにも使われるようです。
サイ本いわく対応しているのはIEのみとのことなので他がどうなっているか
を調べてみる。

下記ソースを実行すると

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta http-equiv="content-style-type" content="text/css">
    <meta http-equiv="content-script-type" content="text/javascript">
    <title>テスト</title>
    <script type="text/javascript" defer="defer">
        alert("1");
    </script>
</head>
<body>
<script type="text/javascript">
    alert("2");
</script>
</body>
</html>

想定する動きとしては
2->1
の順でアラートが表示されるはず。

調べる環境は手元にある

  • IE8
  • Firefox3.6
  • Safari5
  • chrome7

で、実行結果。

ブラウザ 結果
IE8 ○
Firefox3.6 ×
Safari5 ×
chrome7 ×

ここからが不思議なところ（？）
外部ファイルに設定したものにdefer属性をつけてもためしてみたら

ブラウザ 結果
IE8 ○
Firefox3.6 ○
Safari5 ×
chrome7 ○

Firefoxとchromeが2->1の順でアラートがでるようになった。
調べ方が悪いのかなんなのかちょっとわからないけどこうなった。