加载1张1MB大图像(spritesheet)与加载100张10KB图像 [英] Loading 1 1MB large image (spritesheet) vs loading 100 10KB images

问题描述

说我有100张图像，每张图像大小均为10KB.将所有这些放到一个Spritesheet中有什么好处?我知道HTTP请求减少了，因此服务器上的负载也减少了，但我对具体细节感到好奇.使用现代流水线技术，是否仍然值得提高性能?性能提升有多重要?是否会为客户端带来更快的加载时间，或者减少服务器上的负载，或者只是增加相同数量的加载时间，但是减少服务器上的负载?

Say I have 100 images that are each 10KB in size. What are the benefits of putting all those into a single spritesheet? I understand there are fewer HTTP requests, and therefore less of a load on the server, but I'm curious as to the specifics. With modern pipelining, is it still worth the performance gains? How significant are the performance gains? Does it result in faster load time for the client, as well as less of a load on the server or just the same amount of load time, but less of a load on the server?

有没有人可以指出的测试用例来回答这些问题?

Are there any test cases anyone can point to that answers these questions?

基本上，我要问的是-值得吗?

Basically, what I'm asking is -- is it worth it?

推荐答案

在HTTP/1.1下(大多数站点仍在 与使用大型资源相比，下载许多小型资源会产生巨大的开销.这就是为什么拼版作为一种优化技术变得流行的原因. HTTP/2主要解决了这一问题，因此对拼接的要求降低了(实际上，现在已将其视为反模式).不知道您所说的现代流水线"是什么意思，但这主要是将HTTP/2表示为

Under HTTP/1.1 (which most sites are still using) there is a massive overhead to downloading many small resources compared to one big one. This is why spriting became popular as an optimisation technique. HTTP/2 mostly solves that so there is less requirement for spriting (and in fact it's now being considered an anti-pattern). Not sure what you mean by "modern pipelining" but that mostly means HTTP/2 as the pipelining in HTTP/1.1 isn't as fully featured or used much.

通过HTTP/1.1对性能的影响有多严重?实际上非常令人震惊，它使加载时间慢了10倍，而我创建的示例网站.并不会对服务器或客户端的负载造成太大的影响-两种方式都需要发送相同数量的数据-但会严重影响加载时间.

How bad a performance hit is it over HTTP/1.1? Pretty shockingly bad actually - it can make load time 10 times as slow on an example site I created. It doesn't really impact server or client load too much - the same amount of data needs to be sent either way - but does massively impact load time.

说图像拼接(和类似的文本文件连接)存在不利之处.即使只使用一张图像，您也必须下载整个Sprite，更新它会使缓存中的旧版本无效，这需要构建步骤...等等.

Saying that there are downsides to spriting of images (and concatenation of text files which is similar). You have to download whole sprite even if only using one image, updating it invalidates the old version in the cache, it requires a build step... etc.

最终最好的测试方法是尝试一下，因为它因站点而异.但是，一旦HTTP/2普及了，这将变得不那么普遍了.

Ultimately the best test is to try it, as it will be different from site to site. However once HTTP/2 becomes ubiquitous this will become a lot less common.

有关此答案的有关此主题的更多讨论:优化文件缓存和HTTP2

More discussion on this topic on this answer: Optimizing File Cacheing and HTTP2

这篇关于加载1张1MB大图像(spritesheet)与加载100张10KB图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！