async/defer 属性と DOM 構築

4. DOM injection (async true)

実行結果

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", true);</script>
    <script>load("B.js", true);</script>
    <script>load("C.js", true);</script>
    World!
</p>

DOM 要素とイベント

解説

Google アナリティクスの非同期トラッキングコード で有名な DOM 挿入法(または script-inserted external script)による非同期な読み込みです。

歴史的な経緯(async 属性をサポートしない古い IE でも動作する)により、HTML5 準拠のブラウザでは、DOM 挿入法における async 属性のデフォルト値が true となっています。しかし 4.0 以前の Firefox など例外もあるため、async 属性は明示的に true に設定すべきでしょう。

参考情報