javascript - 空 requestAnimationFrame 循环泄漏内存?

标签 javascript performance memory memory-leaks requestanimationframe

我有一个带有 requestAnimationFrame 循环的干净 HTML 文件,它绝对不进行任何处理。但是,如果我查看 Chrome DevTools 上的内存消耗,我会发现已用内存不断增加,垃圾收集器每隔几秒就会运行一次以收集大约 1 兆字节的垃圾数据。

那么这个内存泄漏是从哪里来的呢?

这就是我的内存使用情况:

Chrome DevTools memory usage data

这是我的代码:

<!DOCTYPE html>
<html>
<head lang="en">
    <title></title>
    <script>

        function update() {

            window.requestAnimationFrame(update);

        }

        update();

    </script>
</head>
<body>

</body>
</html>

最佳答案

我也对此进行了调查。我来到这里是因为我注意到 Chrome 正在跟踪调用的来源。

show devtools showing call chain

我注意到它一直在回到原来的调用

devtools traced back to original call

所以,我让它运行一个小时,每隔几分钟检查一次。它确实分配了一段时间的内存,但最终似乎释放了一些。

我很确定这样做是为了让调试其他异步代码更容易,因为了解一些异步请求的开始位置会很有帮助。如果没有这条路径,你得到的只是你的事件/回调被调用,而不是它被创建的地方。

也就是说我理解你的痛苦。众所周知,24fps 存在问题,电影导演倾向于避免出现这些问题的场景类型。当"The Hobbit"出来并以 48 fps 拍摄,导演尝试添加一些类型的场景,但以 24 fps 失败。

在视频游戏中众所周知,对于任何 2d 滚动游戏来说,30fps 是不够的。对于屏幕游戏来说,它还算过得去(PS1、PS2、N64 上的整代游戏以 30fps 的速度发货),但对于 2d 滚动游戏,整个屏幕似乎以 30fps 的速度关闭,而在 60fps 的速度下看起来很流畅

无论如何,我没有建议的解决方案。这只是浏览器的工作方式。每次您创建一个事件时,这就是 requestAnimationFrame 所做的,必须分配一些小对象并将其放在将来某个时间点要执行的事件列表中,这本身就占用了内存。特别是对于 requestAnimationFrame,浏览器可能会在特殊情况下只有几个事件的预分配队列并尝试回收它们,而不是使用它们用于所有其他事件的通用系统(鼠标、键盘、图像加载、XHR 请求完成等),但这可能很难实现,因为当事件实际执行时,它们可能需要在同一个队列中。

即便如此,JavaScript 本身也是关于分配内存的。几乎不可能不这样做。调用函数会分配参数,因为它们最终成为该函数的闭包上下文的一部分(JS 引擎可能会对此进行优化,但从语言的 Angular 来看它们会分配)。

现在浏览器开始瞄准需要 90fps 的 WebVR,也许他们会想出一种新方法。或者也许我们都会切换到 WebAssembly?

¯\_(ツ)_/¯

关于javascript - 空 requestAnimationFrame 循环泄漏内存?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33144081/

相关文章:

javascript - Chrome 扩展 JavaScript 错误

java - 快速静态键值映射

sql - 低内存销毁操作

javascript - 使用 AnalyserNode 进行频率截止

JavaScript 多重 promise 导致 null

c# - 字典枚举关键性能

memory - JMeter 加载服务器是否影响我的结果?

在 C 中重新分配内存时编译中断

javascript - 如何在组合框中输入非英文字母?

ruby-on-rails - 如何加快 Rails 延迟作业的启动时间?