たとえば、Weibo の v 認(rèn)定のアイコン
UI をファイルのバッチに分割し、使用するときにトリミングしてみてはどうでしょうか?
ちなみに、モバイル端末も実際の開発ではこのように動(dòng)作するのでしょうか?
リソースのサイズが小さく、量が多いため、ファイルのバッチに分割すると、Web ページの読み込み時(shí)に大量の http リクエストが生成され、デバイスのパフォーマンスとネットワーク帯域幅が消費(fèi)されます。
なぜ複數(shù)のファイルに分割しないのかを説明するよりも、新しい機(jī)能を向上させるために、小さなファイルを統(tǒng)合して公開する方が良いでしょう。これは CSS スプライト効果です
原理: 小さなアイコンと背景畫像を 1 つの畫像に結(jié)合し、CSS の背景の位置を使用して畫像の表示する必要がある部分を表示します。
目的: 時(shí)間を短縮します。 Web ページの畫像を読み込むのに時(shí)間がかかります。サーバーへのリクエストの數(shù)により、ページの読み込み速度が速くなります。
問題: 初回読み込み時(shí)にメモリの消費(fèi)量が比較的多く、不要な畫像やアイコンも読み込まれます。思い出に
スプライトエフェクトは通常、攜帯電話では使用されません。その理由は、攜帯電話のリソースは通常、使用時(shí)にメモリにロードされるため (遅延ロード)、スプライトを使用すると改善されます。畫像のメンテナンス
の代償として、畫像を使用する際に指定された畫像を表示するためにより多くの CSS 操作が必要になるということです。同時(shí)に、iOS ではスプライト畫像を使用すると、畫像をさまざまな攜帯電話に適応させるのが難しくなります。