async/defer 属性と DOM 構築

6. script with defer (IE bug)

実行結果

Hello World!

マークアップ

<p id="result">
    Hello
    <script src="D.js" defer></script>
    <script src="E.js" defer></script>
    <script src="F.js" defer></script>
    World!
</p>

DOM 要素とイベント

解説

script[defer] doesn’t work in IE<=9 で報告されている「IE9 以下で jquery.jsjquery-ui.js をそれぞれ defer 属性付きで読み込んだ際に起きるバグ」を単純化して再現しました。

発生原因は innerHTML を介して既存 DOM に 直接 HTML を挿入することと推定されており、本例では D.jsE.jsF.js を次のようなコードにして、スクリプトの実行が途中でストールしてしまう様子を再現しています。

document.getElementById('result').innerHTML += 'D';