处理svg <img/>时的内存管理

Question

我正在使用SVG-Edit创建一个非常大的SVG图像文件。问题是内存使用看起来很疯狂，我想知道这是否正常，或者我在优化部门中缺少什么。

下面是一个表格，显示每个阶段的内存增量，使用Firefox 10：内存页面：

阶段：

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

* 我的自定义功能，而不是SVG-Edit的

正如您在Ready＆lt; - ＆gt;的delta中所看到的加载图片，内存使用量增加了300 MB！加载16 MB的图像！我加载图片的方式是创建ObjectURL，所以这不是原因。在预览期间，我将ObjectURL数组转换为数据：uri，所以我理解那里的巨大增长（我认为仍然有点太多）。要求是生成一个包含所有图像的SVG，因此每个SVG的典型大小为50MB或更大。

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

我会感激任何帮助，特别是关于我如何真正确定记忆的确切内容。

这是加载图像时的简化流程（输入change（）事件）：

• 将Image.src设置为objectURL
• 设置Image.onload事件以创建具有src，width，height的SVGImage元素，从Image复制。 revokeObjectURL（）也被执行
• 将SVGImage存储在对象的全局数组中{imageID，＆lt; image＆gt;元素，文件句柄}
• 将SVGImages附加到SVG

Answer 1

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

所以你可以拥有一个微小的SVG图像，其中只有一个1000像素×1000像素的矩形;这可能是在不到500字节的SVG中完成的。但渲染的版本将是4MB的像素数据......