Html 复杂页面的SVG内存占用

我有一个设计，需要大量的小条形图（火花线大小）。一个典型的页面很容易有60多个图形，每个图形显示100多个数据点。这样的东西在浏览器中的内存占用会被禁止吗？我还可以使用输出PNG的服务器端渲染器，但SVG似乎可以做更多的工作

其他注意事项：Rapheal.js可能会将SVG转换为IE的VML。因此，那里的内存占用也需要合理

---

我们非常感谢您提供的任何帮助或找到好答案的方法。

您所描述的svg元素的数量肯定会带来内存消耗方面的问题

与canvas元素相反，SVG要求浏览器为所有表示的元素维护一个对象模型。此对象模型使您可以轻松地将事件关联到特定元素的单击。您不必跟踪正方形在屏幕上的位置、大小、缩放等。然而，这是以内存需求为代价的，并且与画布标记形成鲜明对比，画布标记只担心绘制像素的颜色，您还需要跟踪单击的“对象”

因此，当试图确定性能是否会成为一个问题时，通常明智的做法是从目标硬件的最低公分母开始。你的目标是移动设备吗？你的目标是笔记本电脑和台式机吗

一旦你对这个问题有了答案，就针对那个硬件构建一个虚拟应用程序，该应用程序反复使用一个虚拟图（100个数据点）60次。构建足够的内容，以便您能够以反映用户将如何与显示器交互的方式与显示器进行交互（如果您希望用户能够滑动图形，则应包括这一点，等等）

使用这个笨拙的原型，现在尝试使用基本交互，如果性能满足您的要求（即，应用程序观众的期望）

对于这种性质的应用程序的性能增强，我建议结合使用ajax和svg。我会生成图形的缩略图（使用SVG，由于减少了细节，它们的示意图会小得多），当用户决定获取更多细节时，我会使用ajax获取特定图形的更详细的SVG表示

---

享受构建应用程序的乐趣：）

您描述的svg元素的数量肯定会带来内存消耗方面的问题

与canvas元素相反，SVG要求浏览器为所有表示的元素维护一个对象模型。此对象模型使您可以轻松地将事件关联到特定元素的单击。您不必跟踪正方形在屏幕上的位置、大小、缩放等。然而，这是以内存需求为代价的，并且与画布标记形成鲜明对比，画布标记只担心绘制像素的颜色，您还需要跟踪单击的“对象”

因此，当试图确定性能是否会成为一个问题时，通常明智的做法是从目标硬件的最低公分母开始。你的目标是移动设备吗？你的目标是笔记本电脑和台式机吗

一旦你对这个问题有了答案，就针对那个硬件构建一个虚拟应用程序，该应用程序反复使用一个虚拟图（100个数据点）60次。构建足够的内容，以便您能够以反映用户将如何与显示器交互的方式与显示器进行交互（如果您希望用户能够滑动图形，则应包括这一点，等等）

使用这个笨拙的原型，现在尝试使用基本交互，如果性能满足您的要求（即，应用程序观众的期望）

对于这种性质的应用程序的性能增强，我建议结合使用ajax和svg。我会生成图形的缩略图（使用SVG，由于减少了细节，它们的示意图会小得多），当用户决定获取更多细节时，我会使用ajax获取特定图形的更详细的SVG表示

---

喜欢构建你的应用：）

喜欢Adam使用PNG替代SVG闪屏的想法，并根据需要下拉SVG。使用输入到库中的相同SVG源，可以很容易地在服务器端呈现这些内容，例如或可能

---

如果您正在寻找使用canvas（具有IE的自动解决方法）的工具，请查看该库，它可能已经满足了您的所有需要。

喜欢Adam的想法，即使用PNG替代SVG火花线，并根据需要下拉SVG。使用输入到库中的相同SVG源，可以很容易地在服务器端呈现这些内容，例如或可能

---

如果您正在寻找使用canvas（IE自动解决方案）的工具，请查看该库，它可能已经完成了您所需的所有操作。

规范化数据是关键。在大多数情况下，100个数据点不是必需的，也不是人眼可以看到的50像素宽的闪光点。使用数据标准化将100点减少到5点，这对眼睛更容易，性能更高

当您拥有大量的服务器端迷你图片时，服务器端迷你图片图像精灵的性能往往优于前端SVG/Canvas生成的迷你图片

下面是一个使用出色的PNG压缩的Java快速服务器端sparkline解决方案：

---

规范化数据是关键。在大多数情况下，100个数据点不是必需的，也不是人眼可以看到的50像素宽的闪光点。使用数据标准化将100点减少到5点，这对眼睛更容易，性能更高

服务器端sparkline图像精灵的性能往往优于前端SVG/Canvas生成的sparkli