30secondsofinterviews.org
30 seconds of interviewsを一通り読んで面白かったので紹介していきたい
What are defer and async attributes on a <script> tag?
<script src="myscript.js"></script>
<script src="myscript.js" defer></script>
<script src="myscript.js" async></script>
いずれの属性も指定しない場合、スクリプトは同期的にダウンロード・実行され、ドキュメントのパースはスクリプトの実行が終了するまで中断される。スクリプトは順番に実行される
defer属性はドキュメントのパース中にスクリプトをダウンロードする。DOMContentLoadedイベントリスナ内のスクリプト実行と同様に、ドキュメントのパース完了後に実行される。deferスクリプトは順番に実行される。
async属性はドキュメントのパース中にスクリプトをダウンロードする。パースが完全に終了する前に、スクリプトを実行する。asyncスクリプトは必ずしも順番に実行されない。
tips
- スクリプトが互いに依存している場合は、
deferを使用する。
- スクリプトが独立している場合は、
asyncを使用する。
- DOMが必ず準備されていなければならない、かつ実行するスクリプトがDOMContentLoaded内に置かれていない場合、
deferを使用する。
