加载 1 个 1MB 大图像（spritesheet）与加载 100 个 10KB 图像答案

【问题标题】：Loading 1 1MB large image (spritesheet) vs loading 100 10KB images加载 1 个 1MB 大图像（spritesheet）与加载 100 个 10KB 图像
【发布时间】：2017-04-24 05:35:10
【问题描述】：

假设我有 100 张图片，每张图片大小为 10KB。将所有这些放入单个精灵表有什么好处？我知道 HTTP 请求更少，因此服务器上的负载也更少，但我对细节很好奇。使用现代流水线，它仍然值得性能提升吗？性能提升有多大意义？它是否会导致客户端的加载时间更快，以及服务器上的负载更少，或者加载时间相同，但服务器上的负载更少？

是否有任何人可以指出来回答这些问题的测试用例？

基本上，我要问的是——值得吗？

【问题讨论】：

标签： apache server webserver hosting host

【解决方案1】：

在 HTTP/1.1 下（大多数网站仍然使用）与一个大资源相比，下载许多小资源的开销很大。这就是精灵作为一种优化技术变得流行的原因。 HTTP/2 主要解决了这个问题，因此对精灵的要求更少（事实上它现在被认为是一种反模式）。不确定您所说的“现代管道”是什么意思，但这主要是指 HTTP/2 作为pipelining in HTTP/1.1 isn't as fully featured or used much。

对 HTTP/1.1 的性能影响有多严重？实际上非常糟糕 - 它可以使加载时间慢 10 倍 on an example site I created。它并不会真正过多地影响服务器或客户端负载 - 无论哪种方式都需要发送相同数量的数据 - 但会极大地影响加载时间。

说图像分割（以及类似的文本文件的串联）有缺点。即使只使用一个图像，您也必须下载整个精灵，更新它会使缓存中的旧版本无效，它需要一个构建步骤......等等。

最终最好的测试是尝试一下，因为它会因站点而异。然而，一旦 HTTP/2 变得无处不在，这将变得不那么普遍。

关于这个话题的更多讨论：Optimizing File Cacheing and HTTP2

【讨论】：

谢谢，我只是要求一个相对的答案，“http 1.1 的大量开销”给了我一个很好的画面。