コメント:非同期負荷は、非ブロッキングの同時処理として理解できます。過去には、さまざまなJavaScriptテクニックを使用してこれを行いました。現在、WebKitは、HTML5のスクリプトタグのASYNC ASYNC属性を実装しています。興味のある友達はそれについて学ぶことができます。
(翻訳者のメモ:非同期負荷は、非ブロッキング同時処理として理解できます。)HTML5に興奮している理由の1つは、業界で待望の多くの機能を実装することです。入力ボックスに空白のプロンプトを常に表示する必要がありますが、それらはすべてJavaScriptに実装されています。また、ブロック全体をクリック可能にしたいと考えています。これはJavaScriptを使用して実装されています。
WebKitは、HTML5のスクリプトタグの非同期特性を実装しています。過去には、これを行うためにさまざまなJavaScriptのトリックを使用していましたが、新しいプロパティにより、ブロッキングを防ぐことができます。
async -html属性
先に述べたように、Async属性を追加することは非常に簡単です:
<! - Asyncを指定し、Onload Callback->を指定します
<script async src = "sitescript.js"> </script>
実際、JavaScriptとHTML構造の設計が合理的である場合、スクリプト要素を非同期にロードできるケースの90%。
Defer -HTML属性
Safariブラウザは、追加の延期属性を追加します
<! - deferを指定してください、効果はasync->に似ています
<Script Defer src = "sitescript.js"> </script>
AsyncとDeferの違い
webkitの公式ブログは、asyncとdeferの違いを説明しています
-------------------------------------------
通常の状況では、HTMLソースファイルを解析するときにブラウザが外部スクリプトに遭遇した場合、解析プロセスが一時停止され、スクリプトファイルをダウンロードするためにリクエストが送信されます。スクリプトが完全にダウンロードされ、実行された後も、DOM Parsingは実行されます。例えば:
<スクリプトsrc = myblockingscript.js> </script>
ダウンロードプロセス中、ブラウザは、HTMLの解析、他のスクリプトの実行、CSSレイアウトの表示など、他の有用なタスクを実行することをブロックします。 WebKitプリロードスキャナーは、ダウンロードフェーズ中にマルチスレッドを検出できますが、一部のページではまだ大きなネットワーク遅延があります。
ページの表示速度を改善するための多くの手法がありますが、それらはすべて追加のコードとブラウザー固有のスキルが必要です。これで、スクリプトは、非同期または延期属性を追加して、スクリプトを同期して実行する必要がありません。例は次のとおりです。
<スクリプトasync src = "myasyncscript.js"> </script>
<Script Defer src = "mydeferscript.js"> </script>
HTML解析を一時停止せずに、AsyncもDefer Annotationスクリプトもすぐにダウンロードされません。どちらも、スクリプトを実行する必要がある初期化を解決するためのオンロードイベントコールバックをサポートします。
2つの違いは、実行の違いです。
ASYNCスクリプトは、スクリプトファイルがダウンロードされた直後に実行され、その実行時間はウィンドウのロードイベントがトリガーされる前に必要です。これは、複数の非同期スクリプトがページに表示される順序で実行されない可能性が高いことを意味します。
対照的に、ブラウザは、HTMLページでの発生順に複数の延期スクリプトが実行され、実行時間がDOM解像度が完了し、ドキュメントのドンコンテンツロードイベントが起動される前に実行されることを保証します。
以下は、ダウンロードに1秒かかり、他の操作を解析するのに1秒かかる例です。ページ全体の読み込みが約2秒かかったことがわかります。
同じ例ですが、今回はスクリプトの延期属性を指定しました。 Defer Scriptがダウンロードされると、他の操作が並行して実行できるため、約1倍高速になります。
-------------------------------------------
ブラウザはAsyncとDeferをサポートしています
上記の記事にも記載されています:
WebKitに基づいた新しいバージョンのブラウザに加えて、Firefoxは長い間DeferとOnloadプロパティをサポートしており、FF3.6以降Async属性を追加しました。 IEはDefer属性もサポートしていますが、非同期属性をサポートしていません。 IE9から開始すると、オンロード属性もサポートされます。
AYNSCは素晴らしいです!
WebKitがAsyncを実装するのを見てとてもうれしかったです。ブロッキングは、すべてのWebサイトに大きなパフォーマンスボトルネックであり、スクリプトファイルを非同期ロードすることが間違いなくWebページをスピードアップすることができます。