CSS精灵如何加速网站？

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

---

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

到服务器的往返次数更少。不是对6个不同图像的6个请求，而是对同一图像的一个请求和6次使用。如果服务器在大多数情况下响应“自上次请求以来，它没有更改”，则可以显著减少网络通信量。

，因为多个映像需要多个http请求。请参阅雅虎的性能规则#1:。

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

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

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

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

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

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

每一次你必须避免的机会，你应该

---

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

除了上述原因之外，我发现它们更容易处理。如果您更新图像，您只需要修改和上载一个文件，并在代码中更改一个URL。

几年前我做了一些数字-对于一个43字节1x1 gif，HTTP开销（不包括任何g TCP数据包开销）超过240字节。您可以添加，这取决于图像，压缩可以更有效。此外，TCP/IP在传输更大文件时处理效率更高。此外，如果您的CSS中只有一次背景图像样式（并且在任何地方都应用相同的类），则只有一个图像请求。（不是多个304s）事实并非如此-sprited图像更难处理，因为您必须跟踪主图像中的子图像坐标。请记住，“上面”可能会发生变化：如果您的答案被投票通过，或者其他人在您之后加入，您可能最终会超过其他人。在这里引用其他注释时使用用户的用户名，无论发生什么情况，都有意义。