JavaScript - 多くの Web ページのフロントエンドは、ボタン アイコンなどの小さな素材が多数含まれた全体像を切り取ったものです。これはなぜですか?モバイル開発もこのように行われるのでしょうか?

Question

たとえば、Weibo の v 認定のアイコン

UI をファイルのバッチに分割し、使用するときにトリミングしてみてはどうでしょうか?
ちなみに、モバイル端末も実際の開発ではこのように動作するのでしょうか？

Answer 1

リソースのサイズが小さく、量が多いため、ファイルのバッチに分割すると、Web ページの読み込み時に大量の http リクエストが生成され、デバイスのパフォーマンスとネットワーク帯域幅が消費されます。

なぜ複数のファイルに分割しないのかを説明するよりも、新しい機能を向上させるために、小さなファイルを統合して公開する方が良いでしょう。

Answer 2

スプライト写真、スプライト写真、スプライト写真などのキーワードで検索できます

Answer 3

これは CSS スプライト効果です
原理: 小さなアイコンと背景画像を 1 つの画像に結合し、CSS の背景の位置を使用して画像の表示する必要がある部分を表示します。
目的: 時間を短縮します。 Web ページの画像を読み込むのに時間がかかります。サーバーへのリクエストの数により、ページの読み込み速度が速くなります。
問題: 初回読み込み時にメモリの消費量が比較的多く、不要な画像やアイコンも読み込まれます。思い出に

---

スプライトエフェクトは通常、携帯電話では使用されません。その理由は、携帯電話のリソースは通常、使用時にメモリにロードされるため (遅延ロード)、スプライトを使用すると改善されます。画像のメンテナンス
の代償として、画像を使用する際に指定された画像を表示するためにより多くの CSS 操作が必要になるということです。同時に、iOS ではスプライト画像を使用すると、画像をさまざまな携帯電話に適応させるのが難しくなります。