在什么情况下使用HTTP/2单独加载图像比使用sprite和HTTP/1.1加载所有图像要慢?

Ric*_*omi 12 html css image css-sprites web-performance

HTTP/2使得可以复用连接,从而无需连接到服务器.通过单个连接,可以将许多单独的图像发送到客户端.这消除了将许多图像组合成一个并使用CSS将其分开的旧图像精灵图案.

我很好奇精灵在HTTP/2世界中是否真的更快.如果是这样,在什么情况下呢?

Sar*_*oma 9

正如您所知,Sprite用于防止多个请求排队,因此使用一个有效负载可以获得该站点的所有精灵.

但是对于精灵,您往往会获得许多在整个网站中使用的额外图标,而这些图标在任何单个页面上都不是必需的.

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

但是,通过将一些图像组合到一个文件中可以获得更好的压缩,从而使文件传输的总体大小更小.

由BenoîtBé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/