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

Question

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

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

阶段：

• 之前：加载 SVG-Edit 之前
• 准备就绪：SVG-Edit 已加载
• 加载 35 张图片，总大小为 16.6MB *
• 预览生成的文件*
• 关闭预览 *
• 关闭选项卡，通过 about:memory page 触发 FF 内存清理

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

正如您在 Ready Load Images 的增量中看到的，内存使用量增加了 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 图像，其中只有一个 1000 像素 x 1000 像素的矩形；这可能在 500 字节以下的 SVG 中完成。但渲染后的版本将是 4MB 的像素数据......