[WEB]非同期ローディングスクリプトの2つの方法-async/defer


<script src="foo.js"></script>
<script src="bar.js" async></script>
<script src="baz.js" defer></script>
現在のフロントエンド環境では、エントリポイントは1つしかありません.
残りのモジュールをすべてインポート/エクスポートし、バインドすることに慣れています.
1つのentry pointファイルでもcreate-act-appなどのツールで生成できます.
初期に設置した時に植え込むだけで、もう触らないからです.<script>どの位置に置くべきか、考えるべきことはほとんどありません.
最近のスクリプトタグは、「Google allianceやadsenseに入れたときに貼っておけばいい」程度しか認識していないので、asyncdeferasyncキーワードを見ました.defer直接非同期ロードの属性が生成された.と思ったのか、<script src="...">非同期機とか言っていたので、正確な違いが気になって調べてみました.

1.default-同期ロード



これは特に説明する必要のない「古典」そのものです.
HTMLをグループ化する場合、<body>に遭遇した場合、JSをダウンロード、実行してからグループ化します.
HTMLファイルが中間的に中断されている場合(特にネットワーク通信時間内)、非同期プロパティを使用しない限り、ユーザーは/457914と最後にスクリプトラベルを追加する必要があります.

2.非同期ダウンロード+即時実行



ダウンロードは非同期で、実行は即時で、実行時は前の場合と同じようにHTMLファイルがブロックされます.また、スクリプトの実行順序は保証されません.
この機能により、スクリプトのタスクが重くなく、他のスクリプトとは独立している場合に利益を得ることができます.ただし、DOMを操作するコードがある場合は、実行時にDOMツリーが正しく整理されない場合がありますので、使用しないほうがいいです.

3.defer-非同期ダウンロード+HTMLパッケージ後実行



ダウンロードは非同期ですが、DOMパーティションが完了するまで実行が遅延します.<script>順番が保障されており、DOM配信終了後、DOMContent Loadedアクティビティの前に運転する.
ダウンロード時に非同期のメリットを享受し、同時に処理を同期して実行することができます.

参考資料

  • https://ko.javascript.info/script-async-defer
  • https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html