JavaScript setInterval() 方法会导致内存泄漏吗？

【问题标题】：Does JavaScript setInterval() method cause memory leak?JavaScript setInterval() 方法会导致内存泄漏吗？
【发布时间】：2012-12-11 15:05:54
【问题描述】：

目前正在开发一个基于 JavaScript 的动画项目。

我注意到，正确使用setInterval()、setTimeout() 甚至requestAnimationFrame 会在没有我请求的情况下分配内存，并导致频繁的垃圾回收调用。更多 GC 调用 = 闪烁 :-(

例如；当我通过在 Google Chrome 中调用 init() 来执行以下 简单代码 时，内存分配 + 垃圾收集在前 20-30 秒内就可以了...

function init()
{
    var ref = window.setInterval(function() { draw(); }, 50);
}

function draw()
{
    return true
}

不知何故，在一分钟左右的时间内，分配的内存开始出现奇怪的增加！由于 init() 只被调用一次，分配的内存大小增加的原因是什么？

（编辑：已上传 chrome 截图）

注意 #1：是的，我尝试在下一个 setInterval() 之前调用 clearInterval()。问题依旧！

注意 #2：为了隔离问题，我保持上面的代码简单而愚蠢。

【问题讨论】：

  • 你如何在 chrome 中检查“内存分配 + 垃圾回收”？
  • @chovy 设置->工具->任务管理器？但这并没有显示垃圾收集。
  • 开发者工具 > 时间线 > 内存 > 记录
  • 我很想知道如果你刚刚做了setInterval(draw, 50); 是否会遇到问题，也许与匿名函数的紧密间隔和范围建立/拆除有关？我本来以为 Chrome 会缓存该功能。
  • 在 chrome 23 和 26 上确认

标签： javascript memory-leaks setinterval


【解决方案1】：

编辑：Yury's answer 更好。

tl;dr IMO 没有内存泄漏。正斜率只是 setInterval 和 setTimeout 的效果。垃圾被收集，如锯齿模式所见，这意味着根据定义没有内存泄漏。 （我认为）。

我不确定是否有办法解决这种所谓的“内存泄漏”。在这种情况下，“内存泄漏”是指每次调用 setInterval 函数都会增加内存使用量，如内存分析器中的正斜率所示。

实际情况是没有实际的内存泄漏：垃圾收集器仍然能够收集内存。根据定义，内存泄漏“发生在计算机程序获取内存但未能将其释放回操作系统时。”

如下面的内存配置文件所示，没有发生内存泄漏。每个函数调用都会增加内存使用量。 OP 预计，因为这是一遍又一遍地调用同一个函数，所以不应该增加内存。然而，这种情况并非如此。每个函数调用都会消耗内存。最终，垃圾被收集起来，形成锯齿图案。

我已经探索了几种重新排列间隔的方法，它们都导致相同的锯齿模式（尽管有些尝试导致垃圾收集永远不会发生，因为引用被保留）。

function doIt() {
    console.log("hai")
}

function a() {
    doIt();
    setTimeout(b, 50);
}
function b() {
    doIt();
    setTimeout(a, 50);
}

a();

http://fiddle.jshell.net/QNRSK/14/ 

function b() {
    var a = setInterval(function() {
        console.log("Hello");
        clearInterval(a);
        b();                
    }, 50);
}
b();

http://fiddle.jshell.net/QNRSK/17/ 

function init()
{
    var ref = window.setInterval(function() { draw(); }, 50);
}
function draw()
{
    console.log('Hello');
}
init();

http://fiddle.jshell.net/QNRSK/20/ 

function init()
{
    window.ref = window.setInterval(function() { draw(); }, 50);
}
function draw()
{
    console.log('Hello');
    clearInterval(window.ref);
    init();
}
init();​

http://fiddle.jshell.net/QNRSK/21/

显然 setTimeout 和 setInterval 不是 Javascript 的正式组成部分（因此它们不是 v8 的一部分）。实施留给实施者。我建议你看看the implementation of setInterval and such in node.js

【讨论】：

  • 是的，正如我在原始消息中发布的那样，我已经知道垃圾回收了。有用。我无法理解的是，为什么单个计时器方法（例如 setInterval()）一直在消耗内存？从您的 JSFiddle 中，我可以看到从 1.1 分钟到 4.8 分钟，内存分配增加（不断增加）！它请求更多内存 = 触发更多 GC 调用！为了停止不必要的 GC 调用，需要“驯服” setInterval() 以便它停止分配内存...
  • @user1928710 我的错。我现在正在研究正确的问题。我的猜测是函数调用不断被推入堆栈。
  • 我怀疑它是堆栈，因为您在这里处理的不是递归，而是异步操作。
  • @inspectahdeck 我认为你是对的，这只是给定时间间隔内每个函数调用所需的常规内存分配。
  • 希望我们可以从 chromium 论坛 (code.google.com/p/chromium/issues/detail?id=167647) 获得 官方 答案，并通过计时器方法了解它是否只是 (ir) 常规内存分配请求。 .
【解决方案2】：

Chrome 几乎没有看到您的程序有任何内存压力（按照今天的标准，1.23 MB 的内存使用率非常低），因此它可能认为它不需要积极地进行 GC。如果您修改程序以使用更多内存，您将看到垃圾收集器启动。例如试试这个：

<!html>
<html>
<head>
<title>Where goes memory?</title>
</head>
<body>

Greetings!

<script>
function init()
{
    var ref = window.setInterval(function() { draw(); }, 50);
}

function draw()
{
    var ar = new Array();
    for (var i = 0; i < 1e6; ++i) {
        ar.push(Math.rand());
    }
    return true
}

init();
</script>

</body>
</html>

当我运行此程序时，我得到了一个锯齿形内存使用模式，峰值在 13.5MB 左右（同样，按照今天的标准来说相当小）。

PS：我的浏览器的细节：

Google Chrome   23.0.1271.101 (Official Build 172594)
OS  Mac OS X
WebKit  537.11 (@136278)
JavaScript  V8 3.13.7.5
Flash   11.5.31.5
User Agent  Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2) AppleWebKit/537.11 (KHTML, like Gecko) Chrome/23.0.1271.101 Safari/537.11

【讨论】：

  • 他的问题是“为什么我的简单程序一直在分配内存，导致垃圾回收”
  • 是的，垃圾回收没问题。也许我应该改写我的问题：为什么一个简单的计时器方法会分配这么多内存？如果我们能弄清楚这一点，我们就可以找到一种编写垃圾收集友好代码的方法，并且只需最少的 GC 调用。无闪烁动画所必需的......
  • 调用函数需要内存。我没有提到这一点，因为我认为这是显而易见的。 matahari，不要在意这个。 “过早的优化是万恶之源”：en.wikiquote.org/wiki/…
  • 这不是过早的优化，他在做动画，当您在动画循环期间浪费分配内存时，您不仅可能会损害帧速率，而且主要问题是当垃圾收集器启动（垃圾收集器运行时用户代码不会执行 - 因此您的动画会短暂停止）。
【解决方案3】：

尝试在不使用匿名函数的情况下执行此操作。例如：

function draw()
{
    return true;
}

function init()
{
    var ref = window.setInterval(draw, 50);
}

它的行为还是一样吗？

【讨论】：

  • 这行不通，不是吗？您不需要将函数传递给 setInterval 而不是返回值吗？
  • 他没有执行draw，他正在传递引用。
  • 在draw后面没有（）只是一个参考。
【解决方案4】：

似乎没有内存泄漏。只要 GC 后内存使用量再次下降，并且整体内存使用量没有平均上升趋势，就没有泄漏。

我在这里看到的“真正”问题是setInterval 确实使用内存进行操作，而且看起来它不应该分配任何东西。实际上它需要分配一些东西：

  1. 它需要分配一些堆栈空间来执行匿名函数和 draw() 例程。
  2. 我不知道是否需要分配任何临时数据来自己执行调用（可能不需要）
  3. 它需要分配少量存储空间来保存来自draw() 的true 返回值。
  4. 在内部，setInterval 可能会分配额外的内存来重新安排重复发生的事件（我不知道它在内部是如何工作的，它可能会重复使用现有的记录）。
  5. JIT 可能会尝试跟踪该方法，这将为跟踪和一些指标分配额外的存储空间。 VM 可能会确定此方法太小而无法跟踪它，我不确切知道打开或关闭跟踪的所有阈值是多少。如果您运行此代码足够长的时间以使 VM 将其识别为“热”，它可能会分配更多内存来保存 JIT 编译的机器代码（之后，我预计平均内存使用量会减少，因为生成的机器代码应该在大多数情况下分配更少的内存）

每次执行匿名函数时都会分配一些内存。当这些分配加起来达到某个阈值时，GC 将启动并清理以使您回到基本级别。循环将继续如此，直到您将其关闭。这是预期的行为。

【讨论】：

  • 值得注意的是，Javascript 在将堆栈帧放在堆上时有点不寻常。
  • 还需要分配arguments对象。
【解决方案5】：

每次调用函数时，都会创建一个stack frame。与许多其他语言不同，Javascript 将堆栈帧存储在堆上，就像其他所有语言一样。这意味着每次调用一个函数（每 50 毫秒执行一次）时，都会将一个新的堆栈帧添加到堆中。这加起来并最终被垃圾收集。

考虑到 Javascript 的工作原理，这有点不可避免。唯一可以真正减轻它的方法是使堆栈帧尽可能小，我相信所有的实现都会这样做。

【讨论】：

    【解决方案6】：

    我想回复您关于 setInterval 和闪烁的评论：

    我注意到，正确使用 setInterval()、setTimeout() 甚至 requestAnimationFrame 会在没有我请求的情况下分配内存，并导致频繁的垃圾回收调用。更多 GC 调用 = 闪烁 :-(

    您可能想尝试用基于 setTimeout 的 less evil 自调用函数替换 setInterval 调用。 Paul Irish 在名为“我从 jQuery 源代码中学到的 10 件事”的演讲中提到了这一点（视频 here，注释 here 参见 #2）。您所做的是将您对 setInterval 的调用替换为一个函数，该函数在 完成它应该做的工作后通过 setTimeout 间接调用自身。引用演讲：

    许多人认为 setInterval 是一个邪恶的函数。无论函数是否完成，它都会以指定的时间间隔不断调用函数。

    使用上面的示例代码，您可以从以下位置更新您的 init 函数：

    function init() 
{
    var ref = window.setInterval(function() { draw(); }, 50);
}

    到：

    function init()
{
     //init stuff

     //awesome code
     
     //start rendering
     drawLoop();
}

function drawLoop()
{
   //do work
   draw();

   //queue more work
   setTimeout(drawLoop, 50);
}

    这应该会有所帮助，因为：

    1. draw() 在完成之前不会被渲染循环再次调用
    2. 正如上述许多答案所指出的那样，来自 setInterval 的所有不间断函数调用都会增加浏览器的开销。
    3. 调试更容易一些，因为您不会被 setInterval 的持续触发所打断

    希望这会有所帮助！

    【讨论】：

      【解决方案7】：

      这里的问题不在于代码本身，它没有泄漏。这是因为时间轴面板的实现方式。当 Timeline 记录事件时，我们会在每次调用 setInterval 回调时收集 JavaScript 堆栈跟踪。堆栈跟踪首先在 JS 堆中分配，然后复制到本机数据结构中，堆栈跟踪复制到本机事件后，它成为 JS 堆中的垃圾。这反映在图表上。禁用以下调用 http://trac.webkit.org/browser/trunk/Source/WebCore/inspector/TimelineRecordFactory.cpp#L55 会使内存图变平。

      有一个与此问题相关的错误：https://code.google.com/p/chromium/issues/detail?id=120186

      【讨论】：

        【解决方案8】：

        我也有同样的问题。客户向我反映，其计算机的内存每次都在增加。起初我觉得一个网络应用程序可以做到这一点真的很奇怪，即使它是通过一个简单的浏览器访问的。我注意到这只发生在 Chrome 中。

        但是，我开始与合作伙伴进行调查，通过 Chrome 的开发人员工具和管理器任务，我们可以看到客户端向我报告的内存增加。

        然后我们看到一个 jquery 函数（请求动画帧）被一遍又一遍地加载，增加了系统内存。在那之后，感谢这篇文章，我们看到了一个 jquery 倒计时，因为它有一个“SETINTERVAL”，每次都在更新我的应用布局中的日期。

        当我使用 ASP.NET MVC 时，我只是从 BundleConfig 和我的布局中退出了这个 jquery 脚本倒计时，用以下代码替换我的时间倒计时：

        @(DateTime.Now.ToString("dd/MM/yyyy HH:mm"))

        【讨论】：

          猜你喜欢
          • 2019-03-09
          • 1970-01-01
          • 1970-01-01
          • 2021-03-23
          • 2021-09-25
          • 2014-12-08
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多
          热门标签
          Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode