使用图像精灵在HTTP/2中有意义吗？

Question

在HTTP/2中不需要捆绑JS和CSS文件,但是图像精灵呢？

看一下这个演示,它似乎已经比HTTP/1.1更快地运行,但不会将图像捆绑到精灵中使它更快？我的意思是,当所有数据都在一个文件中时,PNG的优化算法不会更好吗？

Answer 1

这取决于您的图像大小和格式.如果图像足够大,使用精灵就不会获得太多收益,但对于小图像,即使使用HTTP/2也会有显着的增益.使HTTP/2更好的原因是标头的开销要少得多,甚至可能更少往返(假设服务器实现了PUSH).问题是,你的文件要考虑捆绑它们有多小？

对于位图,你可以很好地指出PNG的优化算法有利于精灵,特别是如果它们的大小足够小.例如,虽然Gabriel Bouvigne的这篇文章中的图像是17.4 kb,但切片会产生132个单独的图像,总计135 kb.当您为传输添加一小部分但仍然存在的额外开销时,它接近十倍.是的,当服务器和客户端之间的带宽有限时,大小仍然很重要.

实际上,这也达到了 文本资源,如javascript,css和SVG文件.如果它们足够小并且不经常更换,您仍可以考虑将它们捆绑在一起.例如,如果作为单独的,缩小的和gzip的js传输,Angular源的ng文件夹中的Javascript 需要69.6 kb.如果你在gzipping之前连接它们,它只有31.9 kb.然而,这里的因素略高于2,如果HTTP/2节省了连接时间和往返次数,则可能没有那么重要.这进一步平衡了单独缓存资源的可能性.

最后要注意的是,如果你的小图像/图标是SVG向量(它们应该!),那么它们就算作文本资源.此外,SVG向量往往有点大,例如,当gzip压缩时,Firefox的SVG图标为15.7 kb.在这个大小的情况下,如果HTTP/2好东西正在运行,那么链接到内联或捆绑的决定是明智的.