29

我正在使用 Chrome Dev Tools v27 中的时间轴分析以下代码的内存使用情况。

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv='content-type' content='text/html; charset=UTF-8' />
  <title>RAF</title>
</head>
  <body>
    <script type='text/javascript' charset='utf-8'>
      var frame = function() {
        window.webkitRequestAnimationFrame(frame);
      };
      window.webkitRequestAnimationFrame(frame);
    </script>
  </body>
</html>

注意它很简单。但最终我看到一个牙齿图案出现，表明垃圾收集器正在回收内存。

Chrome 开发工具时间线

raf 默认会创建垃圾对象吗？有没有办法避免这种情况？谢谢。

4

3 回答 3

7

在此处输入图像描述

我发现了以下内容：如果您将 RAF 功能更改为两个类似“乒乓”的功能，您会得到更少的垃圾。您无法避免第一次初始“大 GC”，但之后您只会看到大约 50kb 的次要 GC，而不是 700kb-1mb 的 GC。代码将如下所示：

<script type='text/javascript' charset='utf-8'>
  window.frameA = function() {
    window.webkitRequestAnimationFrame(window.frameB);
  };
  window.frameB = function() {
    window.webkitRequestAnimationFrame(window.frameA);
  };
  window.webkitRequestAnimationFrame(window.frameA);
</script>

我想这是您在 Chrome 中可以做的最好的事情。我注意到在 FF 中 gc 间隔或内存几乎没有变化，因此它可能与 chrome 调试有关（有关更多详细信息，请参阅上面链接的 chrome 错误报告）。然而，当像这样部署 RAF 时，我注意到我自己的游戏有所改进——而且我需要能够在没有人工 GC 的情况下调试它，而人工 GC 不会在普通用户的机器上发生。

于 2014-04-17T09:39:56.247 回答
5

我认为Chrome可能在那里有问题......

这里已经报告了类似的错误：

https://code.google.com/p/chromium/issues/detail?id=120186

于 2013-08-07T19:50:09.220 回答
3

它看起来像一个保留周期。Frame 正在调用自身，因此保留了一个保留计数并且不会被释放。此外，任何时候您使用配置文件、时间线或堆堆栈监控正在运行的代码都会有一些副作用。

无论哪种方式，我都不会担心。如果您试图让您的应用程序或页面具有更高的性能，则需要解决更大的问题。只要 JS 在 16 毫秒内完成，就没有人会注意到任何事情。

最大的内存/CPU 问题是：网络调用、解压缩 PNG/JPG、创建和销毁 DOM 元素、在非工作线程上处理/解析数据、GPU 纹理使用不当以及分配大量数据导致 GC 占用长时间收集数据。

我能够优化包含 1,000,000 个项目的滚动列表，以在 chrome 上以 120FPS 的速度运行（https://github.com/puppybits/BackboneJS-PerfView）。性能工具应该可以帮助您找到用户可以看到的最大问题，而您无需担心次要问题。

于 2013-10-22T22:15:09.227 回答