将多个图片捆绑在一起以进行HTTP吗？

Question

我有一个页面，其中包含数百个访问页面时需要加载的小图像。数据总量为11 MB，但加载整个页面仍需要11秒以上的时间。
从chrome网络分析器来看，很明显，大部分时间都浪费在等待连接上。典型图像有：
-0.13毫秒-请求已发送
-240.01毫秒-等待（TTFB）
-1.13毫秒-内容下载
Chrome的策略是仅并行建立6个TCP连接，这意味着许多图片需要等待10秒才能下载。

因此很明显，问题出在服务器上，它需要很长时间才能回答每个请求，但是不幸的是，这是我无法控制的唯一问题。该服务器不会更改，并且我无法缓存任何技术更改。

是否可以将所有图像打包到一个下载文件中，然后在浏览器的JS中解压缩？我知道dataurl方法，但是我希望能避免base64膨胀

编辑：
请注意，图像是页面中大型SVG的一部分，因此sprites解决方案可以在SVG中使用吗？

Answer 1

您可以使用CSS sprite sheets。

实时示例：bkmks.com使用此技巧来加快通过sprite sheet like this加载很多图标的操作。

---

更新：工作流程和语法略有不同，但也可以使用SVG精灵：

• A Guide to Create and Use SVG Sprites
• How to Create and Manage SVG Sprites

由于SVG内有光栅图像，因此可能还必须在SVG内 进行精灵技巧。 SVG image syntax似乎支持它。

如果实际图像只是纯光栅图像（SVG只是一个“容器”），我将尝试删除SVG层。这将涉及用对CSS Sprite表的引用替换HTML中对SVG的所有引用。