使用HTTP/2单独加载图片比使用类似HTTP/1.1的精灵图同时加载所有图片慢的情况是什么？

Question

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

我很好奇在HTTP/2世界里，图像精灵是否仍然会更快。如果是这样，在什么情况下呢？

- Rick Viscomi

Answer 1

Sprites（精灵）被用于防止多个请求排队，因此您可以使用一个有效负载获取站点的所有精灵。

但是，使用精灵时，您倾向于获得许多在整个网站中使用的其他图标，在任何单个页面上都不需要全部图标。

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

但是，通过将一些图像组合成单个文件，您可能会获得更好的压缩，从而使文件传输的总体大小更小。

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

关于HTTP/2的详细介绍，可以在Rachel Andrew的文章中找到： https://www.smashingmagazine.com/2016/02/getting-ready-for-http2/

- OrderAndChaos

---

这并不是一个坏的假设，但很难想象压缩会带来如此大的差异，以至于超过逐个加载图像在H2上的好处。如果确实如此，我怀疑它将在非常牵强的情况下发生。这将成为一个很好的研究课题。 - Rick Viscomi

对于精灵速度测试，您可能会有兴趣阅读：http://blog.octo.com/en/http2-arrives-but-sprite-sets-aint-no-dead/ - OrderAndChaos

Answer 2

使用HTTP/2多路复用，服务器将读取许多小文件而不是读取单个大文件。如果服务器受到资源限制（例如某些物联网装置），则您可能能够找到一种情况，在这种情况下，最好让它进行单个大读取，而不是进行许多小读取，因为每个读取都会导致服务器操作系统潜在地执行许多与文件访问相关的操作。

在客户端方面，浏览器将管理许多小文件，而不是一个大文件。我可以想象用于当前精灵工作流程的代码路径已经得到了很好的调整和优化，因为它是如此常用。因此，新的许多小文件的情况可能会更慢，至少在一段时间内。

- hmijail