13

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

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

4

5 回答 5

21

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

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

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

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

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

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

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

于 2009-03-25T20:43:18.857 回答
16

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

于 2009-03-25T20:05:11.053 回答
14

因为多张图片需要多次http请求。请参阅 Yahoo 的性能规则 #1：最小化 HTTP 请求。

于 2009-03-25T20:05:24.767 回答
3

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

于 2009-03-25T20:24:45.357 回答
1

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

于 2009-03-25T22:00:02.587 回答