スクリプトの非同期実行

script 要素の async 属性を使うと、ページの残りの部分に対して関連スクリプトを非同期で読み込んで実行できます。 つまり、ページで解析を続けながら、バックグラウンドではスクリプトが読み込まれて実行されます。プロセス負荷の高いスクリプトが使われるページでは、async 属性を使うと、ページの読み込みパフォーマンスを大幅に向上することができます。

async 属性

async 属性は World Wide Web コンソーシアム (W3C) HTML5 仕様に含まれます。スクリプトには依存関係がないものの、速やかにスクリプトを実行する必要がある状況に対応できるように設計されています。以下に示す仮説の例で、async (または defer) 属性を指定しないと、他のページ コンテンツの読み込みがスクリプトによってブロックされる可能性があることを思い出してください。

ライラの個人ブログには、多数のスクリプトベースのウィジェットが使われています。これらのウィジェットは彼女の訪問者のエクスペリエンスを向上しますが、彼女のページはこれらを読み込まない状態でも機能しています (彼女はスクリプトを無効にしたユーザーをサポートしたいと考えています)。現在、彼女は HTML ファイルの最上部でこれらのすべてのウィジェットを読み込んでいますが、スクリプトの実行時間が長いため、ページの読み込みに時間がかかるという苦情を受けました。彼女はスクリプトをページの最下部に移動して処理の速度を上げようとしましたが、コンテンツが多すぎるため、この変更によってサイトの優れたエクスペリエンスが十分な速度で機能しなくなりました。彼女の真の目的は、残りのページをブロックせずに、これらのウィジェットをできる限り速やかに読み込むことにあります。クイック検索後、ライラは、彼女のまさに必要としているものが HTML5 の async 属性であることに気付きます。すべてのスクリプトベースのウィジェットを外部ファイルに配置すると、サイトが元の速度に戻り、パフォーマンスとスクリプトベース拡張機能のバランスが改善されました。


<head>
  <title>Lilah's Blog</title>
  <script async src="widgets.js"></script>
</head>


実装の詳細

Internet Explorer 10 と、JavaScript を使った Windows ストア アプリでは、script 要素で async 属性と defer 属性の両方がサポートされています (defer 属性は、以前のバージョンの Windows Internet Explorer からサポートされています)。async 属性と defer 属性は、src 属性が指定されている場合にのみ使うことができます。可能な 4 つの組み合わせを以下に示します。

使用法説明

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

スクリプトを直ちに実行し、スクリプトの終了後にページの解析を続けます。この方法は、ページの読み込みパフォーマンスを大幅に低下させる可能性があります。

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

ページの解析を続けながら、スクリプトを非同期にダウンロードします。スクリプトは、ダウンロードの完了後に実行されます。

<script defer src="widgets.js"></script>

ページの解析が終了した後にスクリプトを実行します。

<script async defer src="widgets.js"></script>

async 属性を優先し、defer 属性を無視します。これにより、開発者は、async をサポートするブラウザーではこの属性を使い、async をサポートしないブラウザーでは defer にフォールバックできます。

 

つまり、async を使うことで、Web 開発者は最小限の作業でページの読み込み時間を改善することができます。また、スクリプト ローダー ライブラリで必要とされるブラウザー固有の回避策の数が削減されます。

API リファレンス

async
defer

Internet Explorer Test Drive デモ

HTML5 非同期スクリプトに関するページ

IEBlog 記事

"Promise" を使った JavaScript での非同期プログラミングに関する記事

仕様

HTML5: セクション 4.3.1

 

 

表示:
© 2014 Microsoft