HTML5 遅延と非同期の違いを簡単に紹介します

以下のエディターでは、HTML5 defer と async の違いについて簡単に説明します。編集者はこれが非常に良いものだと思ったので、皆さんの参考として今から共有します。エディターに従って、HTML ページに

JavaScript

を挿入する主な方法は、3f1c4e4b6b16bbbd69b2ee476dc4f83a 要素を使用することです。この要素は Netscape によって作成され、Netscape Navigator 2 で最初に実装されました。その後、この要素は公式の HTML 仕様に追加されました。 HTML4.01 では、3f1c4e4b6b16bbbd69b2ee476dc4f83a に対して defer や async など 6 つの 属性 が定義されています。 defer と async はどちらもオプションであり、外部スクリプト ファイルに対してのみ有効です。

1. ブラウザーが遅延または非同期なしでスクリプトを解析する場合:

<script src="main.js"></script>

「即時」とは、指定されたスクリプトを script タグの前にレンダリングすることを指します。 document 要素、つまり document 要素は後続のロードを待たず、読み取られるとすぐにロードされて実行されます。

2. ブラウザーがスクリプトを解析し、非同期がある場合:

<script async src="main.js"></script>

ブラウザーはスクリプトをすぐにダウンロードしますが、他のリソースのダウンロードや待機など、ページ上の他の操作は妨げられません。他のスクリプトをロードするため。後続のドキュメント要素の読み込みとレンダリングのプロセスは、main.js の読み込みと実行と並行して (非同期的に) 行われます。

async は、スクリプトが出現する順序で実行されることを保証しません。そのため、async 属性を指定する目的は、ページが待機するのを防ぐことです。 2 つのスクリプトのダウンロードと実行により、ページ上の他のコンテンツが非同期的に読み込まれます。非同期スクリプトは読み込み中に DOM を変更しないことをお勧めします。

非同期スクリプトは必ずページのload
イベント
の前に実行されますが、DOMContentLoadedイベントがトリガーされる前または後に実行される場合もあります。非同期スクリプトをサポートするブラウザには、Firefox 3.6、Safari 5、Chrome などがあります。

3. ブラウザーがスクリプトを解析し、遅延がある場合:

<script defer="defer" src="main1.js"></script>
<script defer="defer"  src="main2.js"></script>

は、ドキュメントが完全に解析されて表示され、後続のドキュメント要素を読み込むプロセスが完了するまでスクリプトが遅延することを意味します。 main と同じになります。.js の読み込みは並列 (非同期) で行われます。 HTML5 仕様では、スクリプトは出現順に実行する必要があるため、最初の遅延スクリプトは 2 番目の遅延スクリプトの前に実行され、両方のスクリプトは DOMContentLoaded イベントの前に実行されます。実際には、遅延スクリプトは必ずしも順番に実行されるわけではなく、DOMContentLoaded イベントがトリガーされる前に実行される必要もないため、遅延スクリプトは 1 つだけ含めることをお勧めします。

IE4~IE7 も埋め込みスクリプトの defer 属性をサポートしていますが、IE8 以降のバージョンでは HTML5 で指定されている
behavior
を完全にサポートしています。 IE4、Firefox 3.5、Safari 5、Chrome は、defer 属性をサポートする最も初期のブラウザです。他のブラウザはこの属性を無視し、スクリプトを通常どおり処理します。このため、遅延スクリプトをページの下部に配置することが依然として最良のオプションです。

青い線はネットワーク読み取りを表し、赤い線は実行時間を表します。どちらもスクリプトのもので、緑の線は HTML 解析を表します。



この図は、次の重要なポイントを示しています:
defer と async は、ネットワーク読み取り (ダウンロード) という点では同じですが、どちらも (HTML 解析と比較して) 非同期です
それらの違い 違いは次のとおりです明らかに、defer はアプリケーション スクリプトの読み込みと実行の要件に最も近いですが、この図では説明されていませんが、これは読み込み順序で実行される必要があります。アプリケーション

async は、順不同で実行されるマスターです。とにかく、スクリプトの読み込みと実行は密接に関係しているため、どのような順序で宣言しても、それが読み込まれる限り、実行されます。すぐに実行されます

慎重に考えてください。非同期は依存関係をまったく考慮しないため (最低レベルの逐次実行さえも)、アプリケーション スクリプトにはあまり役に立ちませんが、どのスクリプトにも依存しないスクリプトには非常に役立ちます。またはスクリプトに依存しない、最も典型的な例: Google Analytics

以上がHTML5 遅延と非同期の違いを簡単に紹介しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。