HTML5 スクリプト要素の async および defer asynchronousloading_html5 チュートリアルのスキルの使用の概要

(翻訳者注: 非同期読み込みは、ノンブロッキングの同時処理として理解できます。)

私が HTML5 に興奮している理由の 1 つは、HTML5 が業界で待望されていた多くの機能を実装していることです。空のプロンプトを表示するには入力ボックスが常に必要でしたが、それはすべて JavaScript を使用して実装されました。また、やはり JavaScript を使用して、ブロック全体をクリック可能にしたいと考えています。
WebKit は、HTML5 の SCRIPT タグの async 属性を実装するようになりました。以前は、この種のことを行うためにさまざまな JavaScript トリックを使用していましたが、現在は新しいプロパティによりブロックを防ぐのが比較的簡単になっています。

async - HTML 属性
前に述べたように、async 属性の追加は非常に簡単です:

実際、JavaScript と HTML の構造が適切に設計されている場合、90% の場合、スクリプトは要素は非同期読み込みを使用できます。

defer - HTML 属性
Safari ブラウザは追加の defer 属性を追加します


async と defer の違い
WebKit 公式ブログでは、async と defer の違いが非常に詳しく説明されています
- ---- ----------------------------------
通常の状況では、ブラウザが解析しているときHTML ソース ファイルで外部スクリプトが検出された場合、解析プロセスは一時停止され、スクリプト ファイルのダウンロード要求が送信され、スクリプトが完全にダウンロードされて実行された後にのみ DOM 解析が続行されます。例:

ダウンロード プロセス中、ブラウザは HTML の解析、他のスクリプトの実行、表示などの他の有用な作業をブロックされます。 CSSレイアウト。 Webkit プリロード スキャナーは、ダウンロード フェーズ中にマルチスレッド ダウンロードを検出的に実行できますが、一部のページでは依然として重大なネットワーク遅延が発生します。
現在、ページの表示速度を向上させる手法は数多くありますが、それらはすべて追加のコードとブラウザ固有の手法を必要とします。現在、スクリプトは非同期または遅延属性を追加できるため、スクリプトを同期的に実行する必要がなくなります。

async と defer でマークされたスクリプトは、HTML 解析を一時停止せずにすぐにダウンロードされます。このスクリプトは初期化を実行します。
この 2 つの違いは実行時間にあります。
非同期スクリプトは、スクリプト ファイルがダウンロードされた直後に実行されます。その実行時間は、ウィンドウの読み込みイベントがトリガーされる前である必要があります。これは、複数の非同期スクリプトが、ページに表示される順序で連続して実行される可能性が低いことを意味します。
対照的に、ブラウザーでは、複数の遅延スクリプトが HTML ページに表示される順序で順次実行され、実行時間は DOM 解析が完了した後、ドキュメントの DOMContentLoaded イベントがトリガーされる前に実行されます。

以下は、ダウンロードに 1 秒、解析およびその他の操作の実行に 1 秒かかる例を示しています。ページ全体の読み込みに約 2 秒かかることがわかります。

同じ例ですが、今回はスクリプトの defer 属性を指定しています。これは、defer スクリプトをダウンロードするときに他の操作を並行して実行できるため、約 1 倍高速になります。

----------------------------------------------------- ----
ブラウザが非同期と遅延をサポートするビュー
上記の記事でも言及されています:

Webkit ベースのブラウザの新しいバージョンに加えて、FireFox は非同期と遅延をサポートしています長らくdefer属性とonload属性があったが、FF3.6からはasync属性が追加された。 IE は defer 属性もサポートしますが、async 属性はまだサポートしていません。IE9 以降では、onload 属性もサポートされる予定です。

aynsc 素晴らしいですね!
Webkit が非同期を実装しているのを見てとてもうれしく思いました。すべての Web サイトにとって、ブロッキングはパフォーマンスの大きなボトルネックであり、非同期で読み込むスクリプト ファイルを直接指定できるようになれば、間違いなく Web ページの速度が向上します。