async/defer 属性と DOM 構築

5. DOM injection (async false)

実行結果

Hello World!

マークアップ

<script>
function load(src, async) {
    var js = document.createElement('script');
    js.type = 'text/javascript';
    js.async = async;
    js.src = src;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(js, s);
}
</script>
<p id="result">
    Hello
    <script>load("A.js", false);</script>
    <script>load("B.js", false);</script>
    <script>load("C.js", false);</script>
    World!
</p>

DOM 要素とイベント

解説

HTML5 準拠の主要ブラウザ(IE10+、最新の Gecko と WebKit)では、async 属性を false に設定した DOM 挿入法(または script-inserted external script)により、読み込みの並列化と実行順序の保存が可能な実装がされています。(defer 属性を true に設定しても意味を成しません。仕様上 defer 属性は parser-inserted script にだけ適用されるからです)。

一方、HTML5 に非準拠なブラウザ(IE9 以前や 4.0 以前の Firefox、そもそも async / defer に未対応な Opera など)では実行順序が保存されません(Opera では非同期な読み込みにすらなりません)。

それゆえ現時点では、ブラウザに依存したこの手法は使うべきではありません。読み込みの並列性と実行順序の保存を望むなら LAB.jsRequire.js$script.js など、クロスブラウザなスクリプト・ローダーを用いるべきです。

IE10+ のテストサイト HTML5 Async Scripts にも類似例が掲載されています。

参考情報