async/defer 属性と DOM 構築

2. script with defer

実行結果

Hello World!

マークアップ

<p id="result">
    Hello
    <script src="A.js" defer></script>
    <script src="B.js" defer></script>
    <script src="C.js" defer></script>
    World!
</p>

DOM 要素とイベント

解説

defer 属性をサポートしたブラウザでは、そのスクリプトの読み込みによって DOM 構築やレンダリングがブロックされることはなく、またその実行はドキュメントの解析が終了するまで遅延(defer)されます。別な言い方をすれば、スクリプト中に document.write() がなく、かつページの解析が終わるまで DOM には触らないことの宣言 です。それゆえパーサーは、安心してページの解析を進められるようになります。

また defer 付きスクリプト間の実行順序は保存されます。