ネットワークの優先順位付け

Internet Explorer 11 では、ユーザーに Web ページがすぐに表示されるように、ネットワーク要求に優先順位が付けられます。 また、Web ページのリソースを読み込む順序を開発者が操作することもできます。

ネットワーク要求の優先順位付け

ここでは、Internet Explorer 11 でページの読み込みの優先順位付けを行い、個々のリソースの読み込みを遅らせて後で読み込まれるようにする方法を紹介します。

1 つの要求で読み込むことができる Web ページもありますが、ページに含まれるさまざまな項目により、ほとんどの Web ページでは複数の要求を必要とします。 画像、スタイルシート、スクリプト ライブラリは、元の Web ページの読み込みに使うものとは別の要求によって読み込まれます。

Web ページには、次のようにさまざまな種類のリソースが含まれている可能性があります。

  1. Web ページのルート ドキュメント
  2. CSS スタイルシート
  3. WOFF フォント
  4. スクリプト ライブラリ
  5. onload イベント ハンドラーを使って読み込まれる画像
  6. 非同期 XMLHttpRequest (XHR) 要求
  7. 非同期スクリプト要求 (indexedDBWeb ワーカーファイル API など)
  8. 非同期 XHR 要求
  9. HTML5 audiovideo
  10. object 要素を使って読み込まれる Microsoft ActiveX やその他のコントロール
  11. 遅延させた JavaScript (defer="true")

この一覧は、要求の種類による優先順位を示しています。Internet Explorer 11 以降、ネットワーク要求は種類によって、一般的にはこの順序に従って優先順位が付けられます。

リソースごとに複数のネットワーク要求が必要になる場合があります。 接続管理 (TCP) レイヤーでは、以前のバージョンの Internet Explorer は、読み込まれるリソースの種類やコンテキストに関係なく、各要求を同様に処理していました。 背景画像やフォントは、リンクされたスタイルシートと同様に処理されていました。 バックグラウンドのタブからの要求も、フォアグラウンドのタブからの要求と同じように処理されていました。

Internet Explorer 11 以降、ネットワーク要求は種類によって、一般的には表示される順序に従って優先順位が付けられます たとえば、Web ページのルート ドキュメントからの要求は、遅延 JavaScript 要求よりも優先順位が高くなります。

保留中の要求の数が利用可能な接続の数よりも多くなると、要求がそれらの優先順位に従って処理されます。 最適化された接続と最適化されていない接続を選択できる場合、優先順位の高い要求は優先順位の低い要求よりも先に処理され、最適化された接続が適用されます。

また、Internet Explorer 11 では、要求のコンテキストに基づいて要求の優先順位が決定されます。

  1. フォアグラウンド タブの Web ページによる要求
  2. フォアグラウンド タブの iframe 要素に読み込まれるコンテンツによる要求
  3. バックグラウンド タブの Web ページによる要求
  4. プリレンダリングされるコンテンツの要求

予想されているとおり、フォアグラウンドのタブからの要求は、バックグラウンドのタブからの要求よりも優先順位が高くなります。

リソース読み込みの遅延

開発者は lazyload 属性を使って、個々のリソースの読み込みを遅らせることができます。 これにより、重要ではないリソースの読み込みを後にして、重要なコンテンツをできる限り速く読み込むことができます (選択可能な接続や優先順位の高いリソースが存在しない場合、優先順位の低いリソースは通常どおりに読み込まれます)。これにより、ユーザーに対して処理の結果がよりすばやく表示されるため、Web ページの実感的なパフォーマンスを向上させることができます (特に複雑な Web ページの場合)。

次の要素では、lazyload 属性がサポートされています。

lazyload を "true" に設定すると、その要素の表示に必要な接続レベルの要求が、優先順位の高い要求の後に処理されます。

lazyload の使い方を以下に示します。


<img src="example.jpg" lazyload="1" />

API リファレンス

lazyload

 

 

表示:
© 2015 Microsoft