CSS sprites如何加速一个网站？ [英] How do CSS sprites speed up a web site?

问题描述

我想了解CSS sprite如何改善网站的效能？

I'm trying to understand how CSS sprites improve performance on a site?

为什么下载几个小图片比下载单一图片如果单个图像的总大小是较小图像的总和，则较小的图像？

Why is the downloading of several small images slower than the download of a single image holding the smaller images if the total size of the single image is the sum of the smaller images?

推荐答案

HTTP请求的开销有这样的影响。

It's important to understand why the overhead of an HTTP request has such an impact.

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

In its simplest form, an HTTP request consists of opening a socket, sending the request on the open socket and reading the response.

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

To open a socket, the client's TCP/IP stack sends a TCP SYN packet to the server. The server responds with a SYN-ACK, and the client responds to that with an ACK.

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

So, before you send a single byte of application data, you have to wait for a whole one and a half round trips to the server, at least.

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

Then the client needs to send the request, wait for the server to parse the request, find the requested data, send it back - that's another round trip plus some server side overhead (hopefully a small overhead, although I've seen some slow servers) plus the time to transmit the actual data, and that's the best case, assuming no network congestion which would result in packets being dropped and retransmitted.

每一次你都必须避免这种情况。

Every chance you have to avoid this, you should.

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

Modern browsers will issue multiple requests in parallel in an attempt to reduce some of the overhead involved. HTTP requests can theoretically be done on the same socket, making things a little better. But in general, network round trips are bad for performance, and should be avoided.

这篇关于CSS sprites如何加速一个网站？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！