BFE.devでのAI解答例 - フロントエンド面接質問
119. script tagの属性`async` と `defer` の違いは？

asyncとdeferは、両方ともページの読み込みを遅らせずにスクリプトを実行するための属性ですが、それぞれ異なる方法で機能します。

async属性は、スクリプトが非同期でダウンロードされ、ダウンロードが終了次第直ちに実行されることを示します。この場合、スクリプトの実行がHTMLの読み込みをブロックしないため、ページの読み込み時間が短くなる可能性があります。ただし、スクリプト間の依存関係によっては、スクリプトの実行順序が混乱する可能性があることに注意してください。

一方、defer属性は、スクリプトがHTMLの解析後に実行されることを示します。これは、スクリプトの読み込みと実行がHTMLの読み込みをブロックしないため、同じくページ読み込み時間を短縮することができます。ただし、実行順序はHTML内でスクリプトの順序に従って保証されます。

つまり、asyncはすぐに実行され、順序は保証されませんが、deferは順序が保証されますが、少し遅れて実行されます。どちらを使用するかは、スクリプトの依存関係や実行順序に依存しています。