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