雪碧图

雪碧图，优点在减少页面请求个数。原因 浏览器同域名请求的最大并发数限制。

1，HTTP 客户端一般对同一个服务器的并发连接个数都是有限制的。

实际上，浏览器确实使用并行连接，但它们将并行连接的总数限制为少量（通常为四个）。服务器可以自由地关闭来自特定客户端的过多连接。

2，一些主流浏览器对 HTTP 1.1 和 HTTP 1.0 的最大并发连接数目，可以参考如下表格：

浏览器	HTTP / 1.1	HTTP / 1.0
IE 11	6	6
IE 10	6	6
IE 9	10	10
IE 8	6	6
IE 6,7	2	4f
firefox	6	6
Safari 3,4	4	4
Chrome 4+	6	6
Opera 10.51+	8	？
iPhone 2	4	？
iPhone 3	6	？
iPhone 4	4	？
iphone 5	6	？
Android2-4	4	？

生成雪碧图

spritesmith

用到了 spritesmith 库来生成雪碧图，将一个文件夹下的所有图标都打到一张图片里面，获取到图片的参数放到 less 文件中。

@customer_1_hover: 176 0 176 176 704 528 "https://cdn.gfzq.cn/hkstore/hkportal/sprites/customer.png";

我们还需要暴露一个方法，用来计算得到最终的样式。

.sprite(@x, @y, @case) {
  @url: extract(@case, 7);
  width: @x;
  height: @y;
  background: url(@url);
  background-repeat: no-repeat;
  background-size: round((@x * extract(@case, 5) / extract(@case, 3)), 4) round((@y * extract(@case, 6) / extract(@case, 4)), 4);
  background-position: round(-(extract(@case, 1) / extract(@case, 3) * @x), 4) round(-(extract(@case, 2) / extract(@case, 4) * @y), 4);
};

在 less 文件中引入方法如下

@import (reference) './sprites.less';

之后调用即可

 .customer_1_hover {
   .sprite(4.6vw, 4.6vw, @customer_1_hover);
 }

缺点

换个小图标要重新生成整张图，图标大小变了还得连带 CSS 一堆坐标的改变，真的只是上个时代极限优化的解决方案。 现在还在用的，大多都是历史遗留下来的代码，没有整体重构的。

几年前，小图标流行使用 font 字体，用特殊 web 字体和特殊字符配合显示图标，不过这种也渐渐过时了。 三、四年前，font awesome 就开始启用 SVG 图标了。

SVG 不仅可以无损缩放，而且 svgz 可以压缩到比普通图标还要小，并且可以直接嵌入到网页中，还可以做动画替代 gif，也可以直接当图片文件来用，做 background-image 也是可以的……