# 雪碧图

雪碧图，优点在减少页面请求个数。原因 [浏览器同域名请求的最大并发数限制](https://www.cnblogs.com/sunsky303/p/8862128.html)。

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` 文件中。

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

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

```css
.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` 文件中引入方法如下

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

之后调用即可

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

### 缺点

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

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

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