javascript - 将多个图像捆绑在一起用于 HTTP？

Question

我有一个包含数百个小图像的页面，需要在访问该页面时加载这些小图像。数据总量为 11 MB，但加载整个页面仍需要 11 秒以上。
查看 chrome 网络分析器，很明显大部分时间都浪费在等待连接上。一个典型的图像有:
- 0.13 毫秒 - 发送请求
- 240.01 毫秒 - 等待 (TTFB)
- 1.13 毫秒 - 内容下载
这与 Chrome 只有 6 个并行 TCP 连接的策略一起意味着许多图像等待 10 秒才能下载。

很明显，问题出在服务器上，它需要很长时间来响应每个请求，但不幸的是，这是我无法控制的唯一部分。该服务器不会更改，我无法对技术更改进行任何缓存。

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

编辑:
请注意，图像是页面中大 SVG 的一部分，因此 sprite 解决方案能否在 SVG 中工作？

Answer 1

您可以使用 CSS sprite sheets .

实例:bkmks.com使用此技巧可以加快加载带有 sprite sheet like this 的大量网站图标.

---

更新:工作流程和语法略有不同，但 SVG Sprite 也是可能的:

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

由于您在 SVG 中有光栅图像，您可能还必须在 SVG 中使用 Sprite 技巧。 SVG image syntax似乎支持它。

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