JavaScriptコードをHTMLページに挿入する主な方法は、スクリプトタグを使用することです。これらには2つのフォームが含まれます。 1つ目は、スクリプトタグ間にJSコードを直接挿入することであり、2つ目はSRC属性を介して外部JSファイルを導入することです。インタープリターは、JSコードの解析および実行中にページの残りの部分のレンダリングをブロックするため、大量のJSコードを使用してページの長期的なブランキングと遅延を引き起こします。この問題を回避するために、</body>タグの前にすべてのJS参照を配置することをお勧めします。
スクリプトタグの2つの属性、DeferとAsyncがあります。そのため、スクリプトタグの使用は3つの状況に分けられます。
1. <スクリプトsrc = "example.js"> </script>
延期または非同期属性がなければ、ブラウザはすぐに対応するスクリプトをロードして実行します。つまり、スクリプトタグの後にドキュメントをレンダリングする前に、ドキュメント要素の後続のロードを待つことはありません。これにより、後続のドキュメントの負荷がブロックされます。
2. <スクリプトasync src = "example.js"> </script>
ASYNC属性を使用すると、後続のドキュメントの読み込みとレンダリングがJSスクリプトの読み込みと実行、つまり非同期実行と並行して実行されることを意味します。
3. <Script Defer src = "embler.js"> </script>
延期属性を使用すると、後続のドキュメントのロードプロセスとJSスクリプトのロード（この時点でのみ実行されない）のロードが並行して実行されます（非同期に）実行されます。 JSスクリプトの実行は、ドキュメントのすべての要素が解析され、DomContentLoadedイベントが実行される前に待機する必要があります。
次の図は、3つの違いを直感的に見ることができます。
その中でも、BlueはJSスクリプトネットワークの読み込み時間を表し、RedはJSスクリプトの実行時間を表し、GreenはHTMLの解像度を表します。
図から、次のポイントを明確にすることができます。
1.延期と非同期は、ネットワークの読み込みプロセスで一貫しており、どちらも非同期に実行されます。
2。2つの違いは、スクリプトがロードされた後に実行されるときです。 Deferは、アプリケーションスクリプトの読み込みと実行のためのほとんどのシナリオの要件に沿っていることがわかります。
3.延期属性を持つ複数のスクリプトがある場合、それらはロード順序でスクリプトを実行します。 Asyncの場合、その荷重と実行は密接にリンクされています。宣言命令に関係なく、負荷が完了する限り、すぐに実行されます。依存関係をまったく考慮しないため、スクリプトを適用するのにほとんど役に立ちません。
まとめ：
DeferとAsyncの間の共通点は、JSファイルを並行してロードでき、ページの読み込みをブロックしないことです。違いは、Deferがロードされた後、JSが実行する前にページ全体がロードされるのを待つことです。 Asyncは、ロード後すぐにJSを実行します。したがって、JSの厳格な実行順序がある場合は、Deferを使用してロードすることをお勧めします。
上記は、編集者によって紹介されたJSのDefer属性と非同期属性の違いの詳細な説明です。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！