我有一个需要大量小条形图（迷你图大小）的设计。一个典型的页面很容易有 60 多个图表，每个图表显示 100 多个数据点。诸如此类的浏览器内存占用会令人望而却步吗？我也可以使用输出 png 的服务器端渲染器，但似乎可以使用 SVG 完成更多工作。
其他注意事项： SVG 可能会被 Rapheal.js 转换为 IE 的 VML。所以那里的内存占用也需要合理。
感谢您提供任何帮助或找到好的答案的方法。
问问题
2039 次
3 回答
4
您描述的 svg 元素的数量肯定会在内存消耗方面造成问题。
与画布元素相反，SVG 要求浏览器为所有表示的元素维护一个对象模型。此对象模型使您可以轻松地将事件连接到特定元素的单击。您不必跟踪正方形在屏幕上的位置、大小、缩放等。但是，这是以内存要求为代价的，并且与画布标签形成鲜明对比，这只是担心关于绘制像素的颜色，您必须担心跟踪单击了哪个“对象”。
因此，当试图确定性能是否会成为问题时，通常明智的做法是从目标硬件的最低公分母开始。您的目标是移动设备吗？您的目标是笔记本电脑和台式机吗？
一旦你得到了这个问题的答案，构建一个针对该硬件的虚拟应用程序，该应用程序一遍又一遍地使用一个虚拟图（100 个数据点）60 次。构建得恰到好处，以便您可以以反映用户将如何与之交互的方式与显示器进行交互（如果您希望用户能够滑动图表，则应该包括在内，等等）
使用那个简化的原型，现在尝试使用基本交互以及性能是否满足您的要求（即，您的应用程序受众的期望。）
在这种性质的应用程序的性能增强方面，我建议使用 ajax 和 svg 的组合。我会生成图形的缩略图（使用 SVG，由于减少了细节，它们的占用空间会小得多），并且当用户决定获取更多细节时，我会使用 ajax 来获取该特定的更详细的 SVG 表示图形。
享受构建您的应用程序 :)
于 2011-02-18T00:03:02.403 回答
1
喜欢 Adam 的想法，即使用 PNG 替代 SVG 迷你图并根据需要拉下 SVG。这些可以很容易地在服务器端使用相同的 SVG 源来呈现，这些源可以输入到librsvg或Cairo之类的库中。
如果您正在寻找使用画布的东西（带有 IE 的自动解决方法），请查看jQuery Sparklines库，它可能已经完成了您需要的一切。
于 2011-02-28T16:45:01.783 回答
0
规范化数据是关键。在大多数情况下，50 像素宽的迷你图不需要 100 个数据点，人眼也不会注意到。使用数据归一化从 100 个点减少到 5 个点，这对眼睛更容易且性能更高。
当您拥有大量的迷你图时，服务器端迷你图图像精灵的性能往往优于前端 SVG/Canvas 生成的迷你图。
这是一个使用出色的 PNG 压缩的 Java 中快速的服务器端迷你图解决方案：
于 2017-10-11T20:02:54.207 回答