JavaScript - async属性とdefer属性の違い

JavaScriptfの外部ファイルを非同期で読み込む方法として、 HTML5から「async属性」と「defer属性」が追加されました。

どちらも非同期でファイルを読み込むのですが、 その後の動作に違いがあります。

ここでは、async属性とdefer属性の違いについて説明します。

まずは、それぞれの属性の特徴をみてみます。

async属性の特徴

asyncという単語は「非同期、非同期の」という意味です。

asyncの特徴は次の通りです。

• 非同期で読み込まれる
• 読み込み完了後にJSファイル内容が実行される
• 実行順序が保証されていない

defer属性の特徴

deferという単語は「遅らせる、延期する」という意味です。

deferの特徴は次の通りです。

• 非同期で読み込まれる
• 読み込みが完了してもすぐには実行されない
• HTML解析後にJSファイルが実行される
• 実行順序が保証されている

async属性とdefer属性の違い

上記の特徴から、両者の違いを上げると、

実行タイミングと、実行順序に違いがあります。

実行タイミングの違い

asyncの場合は、JSファイルの読み込み完了後に実行されます。

一方、deferの場合は、JSファイルが読み込まれてもすぐには実行されず、 HTML解析後に実行されます。

deferの実行タイミングをもう少し詳しく言うと、 「HTML解析完了後かつ DOMContentLoaded が発生する前」です。

実行順序の違い

async属性は実行順序が保証されたいないため、依存関係のあるファイルに asyac指定をすると、正常に実行されない可能性があります。

// async 実行順序は保証されない
<script src="common.js" async></script>
<script src="parts1.js" async></script>
<script src="parts2.js" async></script>

一方、defer属性は、記述した順序でJSファイルが実行されます。

ですから、JSファイルに依存関係がある場合は、 asyncではなくdeferを指定するといいでしょう。

// defer 実行順序は保証される
<script src="common.js" defer></script>
<script src="parts1.js" defer></script>
<script src="parts2.js" defer></script>

まとめ

・どちらも非同期で読み込まれます。

・asyncは読み込み完了後に実行されるが、実行順序の保証はありません。

・deferはHTML解析後に実行され、実行順序が保証されます。

・依存関係のある複数ファイルを読み込む場合は、deferを使った方がいいでしょう。