今日の技術

script を書いていて目にすることがあるのが、defer 属性です。

これは何をしているのかな?とは思っていましたが、
つい調べずに通り過ぎてしまいました。

今回の記事として調べてみましたので、書いておきます。

この属性を定義しておく場合、まず推奨する記述ですが、以下のとおりにします。

<script type="text/javascript" defer="defer"></script>

属性名だけ定義する記述は見かけなくなりました。
XHTML では文法エラーになるからだと思います。

これを定義すると何が変わるかというと、スクリプトの実行順序です。
何も設定しない場合は、script タグが出てきた段階で実行されます。

defer がある場合は、DOM が構築された後で実行されます。
defer のあるスクリプト内で、以下の実験をしてみました。

var elms = document.getElementsByTagName("*");
alert(elms[elms.length - 1].tagName);

現在処理しているタグ名を取得します。
普通は処理中の script タグが返されますが、defer スクリプトの場合は body が返されます。
つまり、DOM 構築後に動かすことができます。
各ブラウザで実験してみたところ、onLoad より早いタイミングで動いているようです。
DOM 構築後に DOMContentLoaded のようにしている箇所については、
もしかして代用ができれるかもしれません。
もちろん、引数解析と DOM 構築イベントを両方使っている場合は適用できません。

次に async 属性について解説します。

これは、async 非同期の名前があらわすとおり、起動するタイミングがわかりません。
スクリプトが起動でき次第動かすものなので、負荷が掛からないようにする処理などに
向いていると思います。

---

{a8.net http://books.livedoor.com/item/1934172}
{a8.net http://books.livedoor.com/item/1826530}