CSS sprites 如何加快网站速度？答案

【问题标题】：How do CSS sprites speed up a web site?CSS sprites 如何加快网站速度？
【发布时间】：2009-03-25 20:03:44
【问题描述】：

我想了解 CSS 精灵如何提高网站的性能？

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

【问题讨论】：

标签： css performance http css-sprites

【解决方案1】：

了解为什么 HTTP 请求的开销会产生如此大的影响非常重要。

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

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

因此，在您发送一个字节的应用程序数据之前，您必须至少等待整个一个半往返到服务器。

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

你必须避免这种情况的每一次机会，你都应该这样做。

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

【讨论】：

【解决方案2】：

到服务器的往返次数更少。不是针对 6 个不同图像的 6 个（比如说）请求，而是一个请求和 6 个对同一图像的使用。如果服务器在大多数情况下都会响应“自您上次询问以来它没有改变”，那么这可能会显着减少网络流量。

【讨论】：

几年前我做了一些数字 - 对于一个 43 字节的 1x1 gif，HTTP 开销（不包括任何 g TCP 数据包开销）超过 240 字节。
您可以添加，根据图像，压缩可以更有效。
另外，TCP/IP 在处理大文件时效率更高。
另外，如果你的 CSS 中只有一次 background-image 样式（并且在所有地方应用相同的类），那么只有 1 个对图像的请求。（不是多个 304）

【解决方案3】：

因为多个图像需要多个 http 请求。请参阅 Yahoo 的性能规则 #1：Minimize HTTP Requests。

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

除了上述原因，我发现它们更易于使用。如果您更新图像，您只需修改和上传一个文件，以及一个需要更改代码的 URL。

【讨论】：

实际情况并非如此——精灵图像更难处理，因为您必须跟踪主图像中的子图像坐标。
请记住，“高于”可能会发生变化：如果您的答案被投了赞成票，或者其他人追随您，您最终可能会超过其他人。在此处引用其他 cmets 时使用用户的用户名或用户名，无论如何都会有意义。