async/defer 属性と DOM 構築

1. script with no attribute

実行結果

Hello World!

マークアップ

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

DOM 要素とイベント

解説

各スクリプトの読み込みはほぼ同時に開始されますが、たとえ後続のスクリプト読み込みが早く完了しても、その実行は先頭スクリプトの読み込みと実行の完了までブロックされます。また DOM 構築およびレンダリングもブロックされるため、DOMContentLoaded の発火、およびページ後半の描画が遅れます。