javascript - 处理 svg <image> 时的内存管理

Question

我正在使用SVG-Edit创建一个相当大的 SVG 图像文件。问题是内存使用似乎很疯狂，我想知道这是否正常，或者优化部门缺少一些东西。

下面的表格显示了每个阶段的内存增量，使用 Firefox 10 about:memory 页面:

阶段:

• 之前:加载 SVG-Edit 之前
• 就绪:SVG-Edit 已加载
• 加载 35 张图片，总大小为 16.6MB *
• 预览生成的文件 *
• 关闭预览 *
• 关闭标签页，通过about:内存页面触发FF内存清理

* 我的自定义函数，不是 SVG-Edit 的

正如您在“就绪 <-> 加载图像”的增量中所看到的，内存使用量几乎增加了 300 MB!要加载 16 MB 的图像!我加载图像的方式是创建 ObjectURL ，所以这不可能是原因。在预览期间，我将 ObjectURL 数组转换为 data:uri，因此我理解那里的巨大增加(仍然，我认为有点太多)。要求是生成一个嵌入了所有图像的单个 SVG，因此每个 SVG 的大小通常为 50MB 或更大。

值得注意的是，SVG-Edit 不使用 Canvas。它是基于 DOM 的编辑器。

我将不胜感激任何帮助，特别是关于如何真正确定到底是什么占用了内存。

这是加载图像时的简化流程(输入change()事件):

• 将 Image.src 设置为 objectURL
• 设置 Image.onload 事件以创建具有从 Image 复制的 src、宽度、高度的 SVGImage 元素。 revokeObjectURL() 也会被执行
• 将 SVGImage 存储在对象的全局数组 { imageID, 元素, 文件句柄 }
• 将 SVGImage 附加到 SVG

Answer 1

16MB 是 SVG 的大小。 300MB 的跳转是针对图像表面的，即像素数据。这将是渲染图像的每个像素 4 个字节。

所以你可以有一个很小的 ​​SVG 图像，其中只有一个 1000px x 1000px 的矩形；这可能可以在 500 字节以下的 SVG 中完成。但渲染后的版本将是 4MB 的像素数据......