javascript - Das Front-End vieler Webseiten ist ein ganzes ausgeschnittenes Bild mit vielen kleinen Materialien wie Schaltflächensymbolen usw. Warum ist das so? Wird die mobile Entwicklung auch auf diese Weise funktionieren?

Question

Zum Beispiel dieses Symbol mit V-Zertifizierung auf Weibo

Warum lässt man die Benutzeroberfläche nicht in einen Stapel von Dateien aufteilen, anstatt sie bei der Verwendung abzuschneiden?
Übrigens, wird das in der realen Entwicklung auch auf dem Mobiltelefon möglich sein?

Answer 1

资源体积小, 数量多. 如果分成一批文件的话, 网页加载的时候会产生大量的 http 请求. http 请求的建立是需要消耗设备性能和网络带宽的.

与其说为什么不分成一批文件, 倒不如说是为了提升新能而把小文件整合在一起发布.

Answer 2

可以搜一下 精灵图 雪碧图 sprite图之类的关键字

Answer 3

这是CSS雪碧图效果.
原理: 将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分.
目的: 减少加载网页图片时对服务器的请求次数,提高页面的加载速度.
问题: 首次加载时, 内存消耗比较大, 而且会把不需要用到的图片或者图标也一起加载到内存中.

---

手机端一般不用雪碧图效果.
原因是手机内存本来就不富裕, 手机端资源加载一般都是用到的时候在去加载到内存中(lazy load), 而且使用雪碧图会提高图片维护成本, 在使用图片时需要更多的css操作来显示指定的图片. 同时在iOS中, 使用雪碧图也加大了不同的手机图片适配难度.