scriptタグのasyncとdefer どちらが速い？

scriptタグのasync属性とdefer属性はどちらもブラウザが外部スクリプトを非同期で読み込むために使用されますが、それぞれ動作が異なります。これらの属性の目的はページの読み込み速度を向上させることですが、それぞれの属性が高速化に寄与するシナリオは異なります。

async属性

• async属性が指定されたスクリプトは、HTMLの解析とは独立して非同期に読み込まれます。
• スクリプトのダウンロードが完了すると、HTMLの解析を一時停止し、スクリプトが実行されます。
• async属性は、他のスクリプトやページの読み込み順序に依存しないスクリプトに適しています。
• スクリプトの実行がページの残りの部分の読み込みに影響を与えることが少ないため、ページの表示が比較的早くなります。

defer属性

• defer属性が指定されたスクリプトも非同期に読み込まれますが、HTMLの全ての解析が完了してから実行されます。
• deferはスクリプトが文書の解析後に実行されることを保証するため、DOMが完全に構築された状態でスクリプトが実行されます。
• HTML文書の解析とスクリプトの実行が重ならないため、defer属性を使用したスクリプトはページの読み込みを遅くすることがありません。
• DOMに依存するスクリプトや、他のスクリプトの実行順序が重要な場合に適しています。

どちらが高速か

• asyncとdeferのどちらが「高速」と一概に言えるわけではありません。使用するスクリプトの種類やページ内での役割によって最適な選択が異なります。
• 一般的に、ページの表示速度を最優先するなら、async属性を持つスクリプトがHTMLの解析と並行して読み込まれるため、表示が速くなる可能性があります。
• しかし、DOMの完全な構築後にスクリプトを実行する必要がある場合は、defer属性が適しており、ページの読み込み体験が向上する可能性があります。

結論として、asyncとdeferはそれぞれ特定のシナリオでのパフォーマンス向上を目的としており、どちらが一般的に「高速」かはページの構造やスクリプトの依存関係によって異なります。