我试图理解CSS精灵如何提高网站性能？
为什么下载多个小图片比下载一个包含这些小图片的单个图片更慢，即使单个图片的总大小等于这些小图片的总和？
5个回答
21
了解为什么HTTP请求的开销如此之大非常重要。
简单来说，HTTP请求的基本形式包括打开一个套接字，将请求发送到打开的套接字上并读取响应。
为了打开一个套接字，客户端的TCP/IP协议栈向服务器发送一个TCP SYN数据包。服务器会以SYN-ACK作出回应，客户端再以ACK作出回应。
因此，在您发送任何应用程序数据之前，您必须至少等待一个半往返到服务器。
然后客户端需要发送请求，等待服务器解析请求，查找所请求的数据，将其发送回来 - 这是另一个往返加上一些服务器端开销(希望是小开销，虽然我见过一些慢服务器)再加上传输实际数据的时间，这是最好的情况，假设没有网络拥塞，否则会导致数据包丢失和重传。
每次有机会避免这种情况，都应该尽量避免。
现代浏览器会尝试同时发出多个请求，以减少某些开销。HTTP请求理论上可以在同一个套接字上执行，这会让情况好一点。但总体而言，网络往返对性能不利，应该尽量避免。
- Ori Pessach
16
较少的往返服务器次数。您只需发送一个请求并使用六个相同的图像，而不是为六个不同的图像发送六个请求。如果服务器大多数时候会响应“自上次请求以来没有更改”，那么这可以显著减少网络流量。请按原样保留HTML标记。
- Paul Tomblin
4
1几年前我做了一些数字 - 对于一个43字节的1x1 gif图像，HTTP开销（不包括任何TCP数据包开销）超过了240字节。 - Alister Bulman
你可以补充说，根据图像的不同，压缩效率可能会更高。 - Georg Schölly
此外，TCP/IP 在传输大文件时更加高效。 - David
此外，如果您在CSS中仅使用一次background-image样式（并在各处应用相同的类），则只会有1个图像请求。（而不是多个304） - Chetan S
1
除了上述原因外，我发现它们更容易使用。如果您更新图像，则只需修改和上传一个文件，并在代码中更改一个URL。
- Mark
2
1实际上并非如此 - 精灵图像更难处理，因为您必须跟踪主图像中的子图像坐标。 - levik
1请记住，“above”可能会发生变化：如果您的答案被投票支持，或其他人在您之后发表评论，您可能会排在其他人的上面。在引用其他评论时，请使用用户的用户名或用户名，这样无论如何都会有意义。 - Paul Kroll
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接