0

ページごとに大量の小さな画像 (最大 100) を提供する必要がある Web アプリケーションがあります。キャッシュを使用してデータベース/バックエンドへの呼び出しを減らすことができますが、特に低速の接続では、画像のリクエストとレンダリングに時間がかかるため、画像自体に対して非常に多くの個別のリクエストを行わなければならないことによる顕著な影響があります。

1 つのページに複数の画像を表示するための適切な方法は? CDN (S3 + Cloudfront など) を使用して http リクエストのボトルネックを減らし、地理的に近い場所からコンテンツを提供すること、およびブラウザーでユーザーのビューに到達したときにのみ Ajax を介して画像/コンテンツをロードする可能性があることを認識しています。 . 画像の多いページのパフォーマンスを大幅に向上させる可能性のある他の手法はありますか? それらがハードウェア、フロントエンド、またはその他のものに関連しているかどうかは問題ではありません。

ありがとう。

4

3 に答える 3

2

1 つのページ リクエストで 100 個の画像を読み込むと、各画像がブラウザーに読み込まれるのに時間がかかるため、ページの読み込み時間が長くなります。

簡単な方法は、デフォルトの画像を 1 つだけロードすることです。つまり、100 個の各画像のソースは共通のデフォルトの画像にする必要があり、1 つの画像だけをロードするのに時間がかかりません。

ページがすべてのコンテンツをロードしたら、jQuery を使用して各画像をロードしようとします。

lazyload jQuery プラグインを使用して、ページの読み込み後にすべての画像を読み込みます。

このような

<img class="lazy" src="default.jpg" data-original="img1.jpg" >
<img class="lazy" src="default.jpg" data-original="img2.jpg" >
<img class="lazy" src="default.jpg" data-original="img3.jpg" >
.......
<img class="lazy" src="default.jpg" data-original="img100.jpg">

スクリプトでは次のコードを使用します

$(document).ready(function(){
  $("img.lazy").lazyload();
});

次のリクエストでリクエストするのではなく、ブラウザーがそれらをキャッシュできるように、各画像に expires ヘッダーを追加することができます。

それがあなたを助けることを願っています。

于 2013-02-20T13:25:23.980 に答える
1

画像には別のドメインを使用できます。これらは現在のドメインとは異なるスレッドで呼び出されます。

静的コンテンツを提供するように最適化されたWebサーバーで画像をホストすることもできます。これは動的サーバーよりも高速です。

上記は、そのようないくつかのドメインに拡張できます。ブラウザがドメインごとに4つのスレッドを持つように設定されている場合、追加する各ドメインは、追加の4つに並列化されます（これは、CDNを使用する利点の1つでもあります）。

適用される可能性のあるもう1つの一般的な手法は、 CSSスプライトの使用です。一般的に一緒に使用される画像が多数ある場合は、それらすべてを1つの画像にまとめ、CSSを使用して必要な場所に必要なビットのみを表示できます。 。

于 2013-02-16T19:51:55.033 に答える
1

いつでも画像を 1 つの画像に結合し、CSS を使用して一度にその一部のみを表示できます (一般に CSS スプライトと呼ばれます)。

Google には、いくつかの最適化をカバーする「インスタント プレビュー」の実装方法についてのかなり詳細な記事もあります。

http://googlecode.blogspot.com/2010/11/instant-previews-under-hood.html?m=1

于 2013-02-16T19:48:39.153 に答える