在什么情况下，使用 HTTP/2 单独加载图像比使用 HTTP/1.1 一次性加载所有图像要慢？答案

【问题标题】：Under what circumstances would loading images individually with HTTP/2 be slower than loading all images at once with a sprite a la HTTP/1.1?在什么情况下，使用 HTTP/2 单独加载图像比使用 HTTP/1.1 一次性加载所有图像要慢？
【发布时间】：2016-01-14 18:30:28
【问题描述】：

HTTP/2 使得多路连接成为可能，消除了与服务器建立多个连接的需要。通过单个连接，可以将许多单独的图像向下发送到客户端。这消除了旧的图像精灵模式，即将许多图像组合成一张并使用 CSS 将其分开。

我很好奇精灵在 HTTP/2 世界中是否真的会更快。如果有，在什么情况下？

【问题讨论】：

标签： html css image css-sprites web-performance

【解决方案1】：

如您所知，Sprites 用于防止多个请求排队，因此使用一个有效负载您可以获得该站点的所有 Sprites。

但是使用 sprite，您往往会获得许多在整个网站中使用的额外图标，而这些图标并不是任何单个页面都需要的。

因此，使用 http/2 多路复用，排队资源不再是问题。当您只下载每个页面所需的文件时，您会获得速度优势。

但是，您可以通过将一些图像合并到一个文件中来获得更好的压缩效果，从而使文件传输的整体大小更小。

Benoît Béraud 和 Alexandre Masselot 运行的速度测试给出了一个精灵表加载速度快于单个精灵的示例。他们得出结论，在使用 http/2 http://blog.octo.com/en/http2-arrives-but-sprite-sets-aint-no-dead/ 时，仍然可以使用精灵集来优化网站性能

Rachel Andrew 撰写的关于 http/2 的扩展文章可在此处找到： https://www.smashingmagazine.com/2016/02/getting-ready-for-http2/

【讨论】：

这不是一个糟糕的假设，但很难想象压缩产生的差异会超过在 H2 上单独加载图像的好处。如果是这样，我怀疑这将是在非常人为的情况下。将成为一个很好的研究主题。
对于精灵速度测试，您可能有兴趣阅读：blog.octo.com/en/http2-arrives-but-sprite-sets-aint-no-dead

【解决方案2】：

使用 HTTP/2 多路复用，服务器将读取大量小文件，而不是读取单个大文件。如果服务器是资源有限的（例如一些物联网设备），那么您可能会发现最好让它进行单一的大读取而不是大量的小读取，因为每次读取都会导致服务器操作系统潜在地执行大量与文件访问相关的操作。

在客户端，浏览器将管理大量小文件，而不是大文件。我可以想象用于当前精灵工作流程的代码路径得到了很好的按摩和优化，因为它非常常用。因此，拥有大量小文件的新情况可能会变慢，至少在一段时间内会变慢。

【讨论】：