スクリプトの非同期読み込み(async, deferの違い)

スクリプトの読み込みを非同期にすることで、画面表示を速くすることができます。スクリプトを非同期で読み込む方法には、「async」と「defer」があります。ここでは、その違いについて整理します。

async, deferをつけない場合

<script src="/xxx.js"></script>
<script src="/yyy.js"></script>
  • HTMLパース中に scriptタグ が見つかる。
    • HTMLパースを中断する。
    • scriptをダウンロードする。
    • scriptを実行する。
    • HTMLパースを再開する。
614-javascript-async-defer-default.png

asyncをつけた場合

<script src="/xxx.js" async></script>
<script src="/yyy.js" async></script>
  • HTMLパース中に scriptタグ が見つかる。
    • scriptは非同期でダウンロードされる。HTMLパースは継続。
    • scriptのダウンロードが完了。
      • HTMLパースを中断する。
      • scriptを実行する。
      • HTMLパースを再開する。
614-javascript-async-defer-async.png

scriptタグ が書かれた順に実行されない可能性があります。

deferをつけた場合

<script src="/xxx.js" defer></script>
<script src="/yyy.js" defer></script>
  • HTMLパース中に scriptタグ が見つかる。
    • scriptは非同期でダウンロードされる。HTMLパースは継続。
    • scriptのダウンロードが完了。HTMLパースは継続。
    • HTMLパースが完了。
    • scriptを実行する。
614-javascript-async-defer-defer.png

scriptタグ が書かれた順に実行されます。また、HTMLパースが完了しているので確実にDOM操作をすることができます。