在什么情况下，使用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使多路连接成为可能，消除了与服务器的多个连接。通过单一连接，许多单独的图像可以发送到客户端。这避免了旧的图像精灵模式，将许多图像合并为一个，并使用CSS将它分开。

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

解决方案

正如你所知道的，Sprites被用来阻止多个请求排队，所以一个有效载荷，你可以得到该网站的所有精灵。

但是有了精灵，你往往会获得很多额外的图标，这些图标在整个网站中使用并不是在单个页面上都需要。

因此，对于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/

HTTP/2 makes it possible to multiplex connections, eliminating the need for more than one connection to a server. Over a single connection, many individual images can be sent down to the client. This obviates the old image sprite pattern of combining many images into one and using CSS to cut it apart.

I'm curious if sprites would still actually be faster in an HTTP/2 world. If so, under what circumstances?

解决方案

Sprites, as you will know, are used to prevent multiple requests being queued, so with one payload you could get all the sprites for the site.

But with sprites you tend to get lots of additional icons that are used throughout the website that aren't all needed on any single page.

So with http/2 multiplexing, queuing resources is no longer an issue. You get the speed benefit when you only download the files needed for each page.

However you may get better compression by combining some images into a single file, making the overall size of file transfers smaller.

Speed tests run by Benoît Béraud and Alexandre Masselot have given an example of a sprite sheet loading faster than individual sprites. They concluded that sprite sets can still be used to optimise site performance when using http/2 http://blog.octo.com/en/http2-arrives-but-sprite-sets-aint-no-dead/

Extended write up about http/2 by Rachel Andrew can be found here: https://www.smashingmagazine.com/2016/02/getting-ready-for-http2/

这篇关于在什么情况下，使用HTTP / 2单独加载图像比用HTTP / 1.1的精灵一次加载所有图像要慢？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！