1000画像のHTTPリクエストを削減しますか?
質問
この質問は少しクレイジーに聞こえるかもしれませんが、誰かが賢いアイデアを思い付くことができるのは難しいです。
単一のHTMLページに1000のサムネイル画像があると想像してください。
画像サイズは約5〜10 kbです。
すべての画像を単一のリクエストにロードする方法はありますか?どういうわけかすべての画像を単一のファイルにzipします…
それとも、このテーマに他の提案はありますか?
私がすでに知っている他のオプション:
CSSスプライト
怠zyな負荷
ヘッダーの有効期限を設定します
さまざまなホスト名で画像をダウンロードします
解決
あなたの状況を考えると、私が考えることができる他の2つの選択肢しかありません:
- 「データ:」プロトコルを使用して、サムネイルのベース64エンコードバージョンをHTMLページに直接エコーします。ユーザーブラウザにこれらの画像をキャッシュできないため、これをお勧めしません。
- HTML5のWebストレージを使用して、すべての画像を列にブロブとして保存されたBase64エンコード画像データを使用して記録として保存します。データベースがユーザーマシンにダウンロードしたら、JavaScriptを使用してすべてのレコードをループし、jQueryのようなものを使用してページ上のサムネイルを動的に作成します。このオプションを使用すると、データベース全体がエンドユーザーブラウザでダウンロードされるまで待機する必要があり、かなりモダンなブラウザが必要になります。
あなたの最善の策は、怠zyなロード、有効期限がヘッダーのキャッシュ、複数のホスト名からの画像の提供の組み合わせだと思います。
画像を論理的にグループ化できる場合、上記のすべてに加えて、CSSスプライトも機能する場合があります。たとえば、サムネイルが特定の日にアップロードされた画像用である場合...毎日の1つのファイルを作成して、ユーザーブラウザにキャッシュできる場合があります。
他のヒント
これは、CSSスプライトと呼ばれるものを使用して行われます。 CSSが選択したHTMLで必要な特定の部分を備えた他のすべての画像を含む単一の画像。
で1つのチュートリアルを参照してください http://css-tricks.com/css-sprites
Spdyのようなものが欲しいようですね サーバープッシュ. 。クライアントがHTMLページ(または最初の画像)を要求すると、SPDYを使用すると、サーバーはより多くのリクエストを待たずに他のリソースをプッシュできます。
もちろん、これはまだ実験的です。
試してみることができます モンタージュ ImageMagickのコマンド単一の画像を作成します。