0

ブラウザは「CSS背景画像ハック」をどのようにインテリジェントに実装していますか?この手法は、より大きな画像でメモリを使用して使用できますか?

例としては、次のページを使用できます (例えば、プラス アイコンを見てください):
http://blueimp.github.com/jQuery-File-Upload/

プラス アイコンは実際には 16x16 ピクセルの画像ではなく、より大きく (469 ピクセル x 159 ピクセル)、実際には次のようになります: http://blueimp.github.com/cdn/img/glyphicons-halflings.png
(またはこれ: http://blueimp .github.com/cdn/img/glyphicons-halflings-white.png )

この画像は、すべてのアイコンを含むアイコン テンプレートとして使用され、css ( http://blueimp.github.com/cdn/css/bootstrap.min.css ) で背景画像の位置が調整され、特定の領域のみが表示されます。このようにアイコンテンプレートの
.icon-plus{background-position:-408px -96px;}

アイコンが大きい場合はどうなりますか。サイズ 150px x 150px のサムネイルとアイコン テンプレートは 500 個の画像で構成されていますか? アイコン テンプレートは 37500px x 37500px です。ブラウザはこれを合理的な方法で処理できますか、それともサムネイルを一度に 1 つずつ独自の http プロセスでロードする方がよいでしょうか?

4

2 に答える 2

0

これをさらに調べたところ、HTTP 1.1 はすべての呼び出しを同期 ( source )にするため、CSS スプライトという名前のこの種のハック (および他のハッキーな最適化: データ URL の base64 画像、CSS/Javascript 連結) が必要です。

現時点 (2012 年 10 月) では、これらのようなハッキングは、ページごとに数百の HTTP 呼び出しを行う大規模なサイトに適している可能性がありますが、HTTP 2.0 が数年以内に (私が推測するに) より優れた技術 (非同期呼び出しなど) をサポートするようになり、うまくいけばこれらを実現します。ハック不要。

ハッキングの問題は保守性が低下することであり、HTTP 2.0 が最終的に登場したときに、適切な保守性を取り戻すため、および/または HTTP 2.0 の利点を十分に活用するために、すべてのハックを削除する必要がある場合があります)。HTTP 2.0 を待機している間、たとえば次のことを検討してください。SPDY (最近のニュースによると、これは HTTP 2.0 のベースとなる可能性がありますが、最初に他のサーバー モジュールが SPDY に干渉しないことを注意深く確認し、spdy のブラウザー サポートがどのように増加するかを確認します (増加する場合)。または、サイトがhttp 呼び出しが数回または数十回しかないため、保守性の低下をカバーするためにこれらのハックに十分な利点があるかどうかを慎重に検討してください。

于 2012-10-05T23:34:00.697 に答える