Javascriptにおけるdefer属性とasync属性の使い方を詳しく解説

この記事では、JavaScript における defer 属性と async 属性の使用法について詳しく説明します。必要な方は参考にしていただければ幸いです。

js ファイルを非同期でロードする必要がある理由:

非同期を使用しない場合、ドキュメントは js コードをロードするときに他のリソースのダウンロードをブロックし、空白のページが表示されます。

(1) 先頭に配置された js スクリプトを実行すると、ブラウザが外部リンク ファイルのコードをダウンロードして実行するための時間がかかり、明らかな遅延が発生し、空白のページが表示されます。ユーザーはコンテンツを閲覧できず、ページを操作できません。

(2) IE8、Firefox3.5、Safari4、Chrome2 はすべて Javascript ファイルの並列ダウンロードを許可しており、スクリプトのダウンロード プロセスは相互に影響しませんが、ページの読み込みにはまだ待つ必要があります。すべての Javascript コードがダウンロードされて実行されるまで続行します。このため、3f1c4e4b6b16bbbd69b2ee476dc4f83a タグを 6c04bd5ca3fcae76e30b72ad730ca86d の下部に配置することをお勧めします。

(3) 各 3f1c4e4b6b16bbbd69b2ee476dc4f83a タグはダウンロード時にページのレンダリングをブロックするため、3f1c4e4b6b16bbbd69b2ee476dc4f83a タグの使用を減らすことをお勧めします。これは、外部リンク スクリプトだけでなく、インライン スクリプトにも当てはまります。ブラウザが HTML ページを解析するときに 3f1c4e4b6b16bbbd69b2ee476dc4f83a タグに遭遇するたびに、スクリプトの実行により一定の遅延が発生します。さらに、HTTP リクエストによって追加のパフォーマンス オーバーヘッドが発生することを考慮すると、1 つの 100 KB ファイルをダウンロードする方が、25 KB のファイルを 4 つダウンロードするよりも高速になります。

defer と async の使用法:

同じ点: defer と async はどちらもスクリプトを非同期で読み込むために使用されます。並列ダウンロードを使用すると、ダウンロード プロセス中にブロックされることはありません。

相違点:

defer:

(1) は、外部スクリプトまたは埋め込みスクリプトをロードするために使用できます。インライン スクリプトは IE9 以下に限定されます。メインストリーム ブラウザは W3C の HTML5 仕様に基づいています。defer は src 属性が宣言されている場合にのみ有効です。

例:

//外部脚本<script src="1.js" defer></script>//内嵌脚本<script defer>
    console.log("defer");</script>

(2) defer 属性を持つ 3f1c4e4b6b16bbbd69b2ee476dc4f83a タグはページ上のどこにでも配置でき、対応する Javascript ファイルは 3f1c4e4b6b16bbbd69b2ee476dc4f83a に解析されます。ページ上の ; タグ ダウンロードは開始されますが、DOM の読み込みが完了した後に実行されます (onload イベントの前に呼び出されます)。

async:

(1) 外部スクリプトにのみ使用されます。

(2) 非同期ロード完了直後に実行します。

添付ファイル: defer 属性のブラウザーサポートの詳細については、https://caniuse.com/#feat=script-defer を参照してください。defer を検索してください。

js ファイルを非同期でロードする必要がある理由:

非同期を使用しない場合、ドキュメントは js コードをロードするときに他のリソースのダウンロードをブロックし、空白のページが表示されます。

(1) 先頭に配置された js スクリプトを実行すると、ブラウザが外部リンク ファイルのコードをダウンロードして実行するための時間がかかり、明らかな遅延が発生し、空白のページが表示されます。ユーザーはコンテンツを閲覧できず、ページを操作できません。
(2) IE8、Firefox3.5、Safari4、および Chrome2 はすべて Javascript ファイルの並列ダウンロードを許可しており、スクリプトのダウンロード プロセスは相互に影響しませんが、ページの読み込みは Javascript がすべて完了するまで待つ必要があります。コードはダウンロードされ、続行する前に実行されます。このため、3f1c4e4b6b16bbbd69b2ee476dc4f83a タグを 6c04bd5ca3fcae76e30b72ad730ca86d の下部に配置することをお勧めします。
(3) 各 3f1c4e4b6b16bbbd69b2ee476dc4f83a タグはダウンロード時にページのレンダリングをブロックするため、3f1c4e4b6b16bbbd69b2ee476dc4f83a タグの使用を減らすことをお勧めします。これは、外部リンク スクリプトだけでなく、インライン スクリプトにも当てはまります。ブラウザが HTML ページを解析するときに 3f1c4e4b6b16bbbd69b2ee476dc4f83a タグに遭遇するたびに、スクリプトの実行により一定の遅延が発生します。さらに、HTTP リクエストによって追加のパフォーマンス オーバーヘッドが発生することを考慮すると、1 つの 100 KB ファイルをダウンロードする方が、25 KB のファイルを 4 つダウンロードするよりも高速になります。

defer と async の使用法:

同じ点: defer と async はどちらもスクリプトを非同期で読み込むために使用されます。並列ダウンロードを使用すると、ダウンロード プロセス中にブロックされることはありません。

相違点:

defer:

(1) は、外部スクリプトまたは埋め込みスクリプトをロードするために使用できます。インライン スクリプトは IE9 以下に限定されます。メインストリーム ブラウザは W3C の HTML5 仕様に基づいています。defer は src 属性が宣言されている場合にのみ有効です。

例:

//外部脚本<script src="1.js" defer></script>//内嵌脚本<script defer>
    console.log("defer");</script>

(2) defer 属性を持つ 3f1c4e4b6b16bbbd69b2ee476dc4f83a タグはページ上のどこにでも配置でき、対応する Javascript ファイルは 3f1c4e4b6b16bbbd69b2ee476dc4f83a に解析されます。ページ上の ; タグ ダウンロードは開始されますが、DOM の読み込みが完了した後に実行されます (onload イベントの前に呼び出されます)。

async:

(1) 外部スクリプトのみ。

(2) 非同期ロード完了直後に実行します。

添付ファイル: defer 属性のブラウザーサポートの詳細については、https://caniuse.com/#feat=script-defer を参照してください。defer を検索してください。

上記は、JavaScript での defer 属性と async 属性の使用法について詳しく説明したものです。JavaScript ビデオ チュートリアル について詳しく知りたい場合は、PHP 中国語 Web サイトに注目してください。

以上がJavascriptにおけるdefer属性とasync属性の使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。