【发布时间】：2015-11-27 03:13:42
【问题描述】：
我正在创建一个实时视频编辑器，允许您使用画布添加某些视频效果。您会在我的代码中注意到，我实际上有两个画布元素。流程是：
-
<video>开始使用 CSS 隐形播放。 - 可见的
<canvas>将视频渲染到画布上。 - 为了添加实时效果，我需要另一个隐藏的
<canvas>来处理视频图像，然后将处理后的帧返回到可见的<canvas>。这是我使用getImageData()和putImageData()的地方
我现在在 chrome 中看到内存泄漏。我发现很多线程都在谈论这个问题，但我一直无法找到解决方案。
出于测试目的和小提琴的目的，我删除了“视频效果”代码。没有效果处理还是会内存泄漏。
FIDDLE：http://jsfiddle.net/o8z4ocLd/
使用 Chrome 任务管理器（汉堡菜单 -> 更多工具 -> 任务管理器）观看Memory
你会注意到内存在上升，然后又回落，只是比上次上升得更高。我已经看到它爬升到 1+GB 的内存使用量，最终导致标签崩溃。我尝试了setTimeout 和requestAnimationFrame 的不同变体。似乎都导致了内存泄漏。
编辑
值得一提的是，这似乎只发生在 chrome 中。 Firefox 似乎更好地处理垃圾收集。我还没有看到Firefox超过500mb。
【问题讨论】：
-
不是结合 requestAnimationFrame 和 setTimeout，而是重构使用 rAF 的内置时间戳版本来控制经过的时间。 rAF 减少了不完整帧的堆叠。如果您仍然遇到堆叠的帧内存损失，那么您将不得不降低 FPS——至少在 Chrome 上是这样。
-
@markE 内置时间戳版本？我还没找到类似的东西，你能详细说明一下吗？
-
这是一个带注释的示例，说明如何使用 rAF 的时间戳来计算和使用经过的时间：jsfiddle.net/m1erickson/3k2vypu3 :-)
标签： javascript html canvas memory-leaks