css - CSS Sprite 如何加速网站？

Question

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

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

Answer 1

理解为什么 HTTP 请求的开销会产生这样的影响很重要。

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

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

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

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

只要有机会避免这种情况，您就应该避免。

现代浏览器将并行发出多个请求，以尝试减少所涉及的一些开销。理论上可以在同一个套接字上完成 HTTP 请求，这样会好一些。但一般来说，网络往返不利于性能，应该避免。