javascript - 使用 Canvas 会导致比使用图像更小的 HTTP 请求

Question

我知道将任何图像格式转换为 SVG 都不是一件容易的事，而且这不是我追求的复杂图像。让我解释一下为什么我会问这个问题。作为一名网页设计师，我通常会在网站中使用图像来处理某些元素。包括简单的几何形状、百合花、一些简单的标志等。这些 HTTP 请求的成本相对较小(我们这里说的是 KB)。

但是，如果通过使用 svg 或其他 Canvas 元素而不是简单图像的图像格式，这些请求是否可以更小，我很感兴趣。是否有任何研究或测试来比较 SVG 与图像？是否可以通过对页面上的简单元素使用 Canvas 来使 HTTP 请求更小？如果是这样，那将是个好消息。我什至可以开始创建 Canvas 图像库以重复使用并与他人共享。

Answer 1

对于简单的形状，gzipped SVG 会非常小，在现代浏览器中它是 quite usable .

然而，对于页面加载性能来说，请求数量是一个非常重要的因素，所以如果你使用 CSS sprite sheets，你将获得显着的性能提升。无论图像格式如何。

如果 Canvas 是指将形状存储为 JavaScript 绘图命令(或基于某些 JSON 发布它们的库)，那么与压缩 SVG 相比，它不太可能节省大量带宽(SVG 具有非常有效的格式来定义路径，并且 gzip很好地消除了 XML 的开销)。

您将不得不等待 JS 加载，或者在整个文档中插入多个 Canvas ，或者在压缩生成的图像和构建 data: URL 时消耗 CPU，所以我认为它不会总体上比使用 SVG 或 optimized PNG 更快.