Javascript 使用getImageData和/或putImageData的画布内存泄漏

我正在创建一个实时视频编辑器，允许您使用画布添加某些视频效果。你会注意到在我的代码中，我实际上有两个canvas元素。这个过程是：

开始使用CSS进行不可见的播放

可见的

将视频渲染到画布上

为了添加实时效果，我需要另一个隐藏的

，它将处理视频图像，然后将处理后的帧返回到可见的

。这就是我使用

getImageData（）

和

putImageData（）

我现在看到chrome内存泄漏。我发现很多帖子都在谈论这个问题，但我还没有找到解决方案

为了测试和提琴，我删除了“视频效果”代码。它仍然会在没有处理效果的情况下泄漏内存

小提琴：

使用Chromes任务管理器（汉堡菜单->更多工具->任务管理器）查看

内存

你会注意到记忆在上升，然后又下降，只会上升到比上次更高的位置。我已经看到它的内存使用率上升到1+GB，最终导致选项卡崩溃。我尝试了
setTimeout
和
requestAnimationFrame
的不同版本。所有这些似乎都会导致内存泄漏

编辑

值得一提的是，这似乎只发生在chrome上。Firefox似乎能更好地处理垃圾收集。我没见过firefox超过500mb
 今天早上，我的chrome自我更新为45版。45于2015年9月1日发布，该问题似乎已得到解决！我不再收到内存泄漏。此更新还修复了我在此线程中遇到的另一个问题：

重构以使用rAF的内置时间戳版本来控制经过的时间，而不是将requestAnimationFrame与setTimeout相结合。rAF减少了不可复制帧的堆叠。如果您仍在丢失堆叠帧内存，则必须降低FPS——至少在Chrome上是这样。@markE内置时间戳版本？我还没有找到类似的东西，你能详细说明一下吗？这里有一个注释示例，说明如何使用rAF的时间戳来计算和使用经过的时间：：-）