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

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

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

了解为什么HTTP请求的开销会产生这样的影响非常重要.

在最简单的形式中,HTTP请求包括打开套接字,在打开的套接字上发送请求以及读取响应.

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

因此,在发送单个字节的应用程序数据之前,您必须至少等待整整一个半轮到服务器.

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

你必须尽可能避免这种情况.

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

往返服务器的往返次数减少.而不是6个(比方说)请求6个不同的图像,你得到一个请求和6个使用相同的图像.如果服务器将在大多数情况下响应"自上次您询问以来没有更改",则可以显着减少网络流量.

因为多个图像需要多个http请求.请参阅Yahoo的性能规则#1:最小化HTTP请求.