使用CSS Sprite的优点是什么？如何利用它们？

Z时代
2024-01-10
分类：综合

CSS子画面将多个图像组合为一个图像，从而限制了浏览器必须进行的HTTP请求数量，从而缩短了加载时间。即使在新的HTTP / 2协议下，情况仍然如此。

在HTTP / 1.1下，每个TCP连接最多允许一个请求。使用HTTP / 1.1，现代浏览器可以打开多个并行连接（介于2到8之间），但是它受到限制。使用HTTP / 2，浏览器和服务器之间的所有请求都在单个TCP连接上多路复用。这意味着可以减少打开和关闭多个连接的成本，从而可以更好地使用TCP连接并限制客户端和服务器之间的延迟影响。这样就可以在同一TCP连接上并行加载数十个图像。

但是，根据基准测试结果，尽管HTTP / 2比HTTP / 1.1改进了50％，但在大多数情况下，子画面集的加载速度仍然比单个图像快。

要在CSS中使用Spritesheet，可以使用某些属性（例如） background-image， background-position 并 background-size 最终更改 background 元素的。