CSS sprites如何加速网站的速度？

Question

我试图了解CSS sprites如何提高网站的性能？

如果单个图像的总大小是较小图像的总和，为什么下载几个小图像比下载保存较小图像的单个图像慢？

Answer 1

理解为什么HTTP请求的开销会产生这样的影响很重要。

最简单的形式是，HTTP请求包括打开套接字，在打开的套接字上发送请求并读取响应。

要打开套接字，客户端的TCP / IP堆栈会向服务器发送TCP SYN数据包。服务器以SYN-ACK响应，客户端用ACK响应。

因此，在发送单个字节的应用程序数据之前，至少需要等待整整一个半轮到服务器。

然后客户端需要发送请求，等待服务器解析请求，找到请求的数据，发送回来 - 这是另一次往返加上一些服务器端开销（希望是一个小的开销，虽然我见过一些缓慢的服务器）加上传输实际数据的时间，这是最好的情况，假设没有网络拥塞会导致数据包被丢弃和重新传输。

你应该避免这种情况。

现代浏览器将并行发出多个请求，以减少所涉及的一些开销。理论上，HTTP请求可以在同一个套接字上完成，使事情变得更好。但总的来说，网络往返行程对性能不利，应该避免使用。

Answer 2

减少到服务器的往返次数。而不是6个（比方说）请求6个不同的图像，你得到一个请求和6个使用相同的图像。如果服务器要响应“自上次您询问以来它没有改变”大部分时间，这可以显着减少网络流量。

Answer 3

因为多个图像需要多个http请求。请参阅雅虎的效果规则＃1：Minimize HTTP Requests。

Answer 4

除了最小化请求数量之外，根据图像，您还可能会发现文件大小比它们分开时的组合要小（我认为，由于元数据量减少，其他事情）。使用精灵的另一个好处是，当您首次将鼠标悬停在具有悬停状态的元素上时，您没有闪烁效果，这可以提高用户对页面性能的感知。您可能想要阅读的有关图像优化的有趣资源是Yahoo用户界面博客上的series篇博文。在重读雅虎推荐的性能实践时，我惊讶地发现他们suggested水平而不是垂直排列图像也会减少文件大小。

Answer 5

除了上面的原因，我发现它们更容易使用。如果更新图像，则只需要修改和上载一个文件，并在代码中更改一个URL。