javascript - 手机端怎么减少大量小图标的http请求？（手机端能否使用sprite？）

Question

大家都知道在pc端能够使用雪碧图减少小图标的http请求，但是在手机端如何实现呢？

还有除了使用sprite的方法，还有什么其他的方式能够减少大量图片http请求数？

Answer 1

这个跟手机端和PC端是没有关系的，css sprite只是一种优化图片加载的技术，她的原理是注意依靠css的background-position属性。所以你需要关注浏览器是否兼容background-position即可，显然手机端的绝大部分浏览器是支持的。
不过手机端开发中，如果你使用的单位不是px，那在做css sprite时就需要考虑到单位怎么去适配了。

Answer 2

手机端使用css sprite，要实现窗口响应，background-size使用百分比就行，另外还是建议你使用字体图标吧，现在移动设备显示屏越来越高清了，@2x都不够用了，这里介绍两个字体图标网站给你，希望对你有帮助。
Iconfont：http://www.iconfont.cn/
FontAwesome：http://fortawesome.github.io/Font-Awesome/

Answer 3

这个与手机端和pc端没有关系的。均可以使用雪碧来减少http请求的。不过如果是大量小图标的话，可以使用Font Awesome,一套绝佳的图标字体库和CSS框架。

Answer 4

请参考雅虎优化准则.

Answer 5

一般都用字体图标

Answer 6

还有datauri呀~

Answer 7

就我目前的接触到的来说 spirit 不能响应式布局。所以题主应该是有响应式的要求。那么可以采用字体图标的方式去实现。这样通过控制font-size 就可以控制在不同屏幕大小下的图标大小。同时，字体图标是一次性导入，http请求方面应该是OK的吧。最近也看到篇帖子，内容是响应式图标，很诱人，不过应用还偏窄。 https://icomoon.io/推荐一个字体图标的网站。非常棒，其他的话，慕课网上也有字体图标的相应课程。

Answer 8

1. 使用spdy

2. 使用域名收敛
   结果： 不会减少总请求量，但是会减少请求的连接数和大大减少请求时间

Answer 9

CSS Sprite已经过时了，不支持响应式。
优先用字体图标或矢量图形吧

CSS Sprite的好处是制作方便，一些前端构建工具可自动生成Sprite。但很难应用到响应式页面中。

字体图标支持响应式，有很多现成的图标库，但是制作一些个性化的字体图标需要花一些时间。

减小http请求，也可以将一些小图片base64内置。

兼容性不需要低版本PC浏览器的话，可以用纯CSS3图标库。如：
http://www.uiplayground.in/css3-icons/
http://nicolasgallagher.com/pure-css-gui-icons/demo/
http://cssdeck.com/labs/css3-monochrome-icon-set
http://codepen.io/eMaj/pen/joLqt

各种图标库网上很容易找到，个性化要求的只能自己做了 :)

Answer 10

如果你用过webpack的话，可以把小图标写成base64的图片。