加载 1 个 1MB 的大图像（spritesheet）与加载 100 个 10KB 的图像
Loading 1 1MB large image (spritesheet) vs loading 100 10KB images
假设我有 100 张图片，每张图片大小为 10KB。将所有这些放入一个 spritesheet 有什么好处？我知道 HTTP 请求较少，因此服务器上的负载较少，但我对具体细节很好奇。使用现代流水线，它仍然值得性能提升吗？性能提升有多重要？它会导致客户端加载时间更快，服务器上的负载更少，还是加载时间相同，但服务器上的负载更少？
是否有任何人可以指出可以回答这些问题的测试用例？
基本上，我要问的是——值得吗？
在 HTTP/1.1 下（大多数网站仍然
使用）与一个大资源相比，下载许多小资源的开销很大。这就是精灵作为一种优化技术流行起来的原因。 HTTP/2 主要解决了这个问题，因此对 spriting 的要求较少（事实上，它现在被认为是一种反模式）。不确定 "modern pipelining" 是什么意思，但这主要意味着 HTTP/2 作为 .
HTTP/1.1 对性能的影响有多严重？实际上非常糟糕 - 它可以使加载时间慢 10 倍 on an example site I created。它不会真正影响服务器或客户端负载太多 - 需要以任何一种方式发送相同数量的数据 - 但会极大地影响加载时间。
说图像的 spriting（以及类似的文本文件的串联）有缺点。即使只使用一个图像，你也必须下载整个精灵，更新它会使缓存中的旧版本失效，它需要一个构建步骤......等等
最终最好的测试是尝试它，因为它会因站点而异。然而，一旦 HTTP/2 变得无处不在，这将变得不那么普遍。
关于此主题的更多讨论：
假设我有 100 张图片，每张图片大小为 10KB。将所有这些放入一个 spritesheet 有什么好处？我知道 HTTP 请求较少，因此服务器上的负载较少，但我对具体细节很好奇。使用现代流水线，它仍然值得性能提升吗？性能提升有多重要？它会导致客户端加载时间更快，服务器上的负载更少，还是加载时间相同，但服务器上的负载更少？
是否有任何人可以指出可以回答这些问题的测试用例？
基本上，我要问的是——值得吗？
在 HTTP/1.1 下（大多数网站仍然
使用）与一个大资源相比，下载许多小资源的开销很大。这就是精灵作为一种优化技术流行起来的原因。 HTTP/2 主要解决了这个问题，因此对 spriting 的要求较少（事实上，它现在被认为是一种反模式）。不确定 "modern pipelining" 是什么意思，但这主要意味着 HTTP/2 作为
HTTP/1.1 对性能的影响有多严重？实际上非常糟糕 - 它可以使加载时间慢 10 倍 on an example site I created。它不会真正影响服务器或客户端负载太多 - 需要以任何一种方式发送相同数量的数据 - 但会极大地影响加载时间。
说图像的 spriting（以及类似的文本文件的串联）有缺点。即使只使用一个图像，你也必须下载整个精灵，更新它会使缓存中的旧版本失效，它需要一个构建步骤......等等
最终最好的测试是尝试它，因为它会因站点而异。然而，一旦 HTTP/2 变得无处不在，这将变得不那么普遍。
关于此主题的更多讨论：