defer と async の違い

<script src="A.js" defer></script>
<script src="B.js" defer></script>
<script src="C.js" defer></script>
<span>A.js、B.js、C.jsの順でコードが実行されます。</span>
<span>A.js、B.js、C.jsから、このspan要素を取得可能です。</span>

<script src="A.js" async></script>
<script src="B.js" async></script>
<script src="C.js" async></script>
<span>A.js、B.js、C.jsは読み込みが完了したものから実行されます。</span>
<span>A.js、B.js、C.jsは、このspan要素読み込み前に実行される可能性があります。→ エラー</span>