Javascript 如何创建一个无分配动画循环来避免垃圾收集器？

Question

我正在尝试构建流畅的 60fps 动画浏览器 javascript 循环。我注意到垃圾收集器启动并向动画帧添加可变的非零时间。我首先跟踪代码中的分配，然后将循环自身隔离开来。我正在使用 requestAnimationFrame 并发现在所谓的“空”循环中它仍然会导致每次迭代分配并触发垃圾收集器。令人沮丧的是，这似乎也发生在其他循环机制 setInterval 和 setTimeout 中。

下面我整理了一些 jsfiddles 和屏幕截图来演示示例“空循环”。所有样本均来自约 5 秒的时间线。

此时，我正在寻找最小化垃圾回收的最佳解决方案。从下面的示例来看，requestAnimationFrame 似乎是这方面最差的选择。

请求动画框架

https://jsfiddle.net/kevzettler/e8stfjx9/

var frame = function(){
    window.requestAnimationFrame(frame);
};

window.requestAnimationFrame(frame);

设置间隔

https://jsfiddle.net/kevzettler/p5LbL1am/

var frame = function(){
   //literally nothing
};

window.setInterval(frame, 0);

设置超时

https://jsfiddle.net/kevzettler/9gcs6gqp/

var frame = function(){
    window.setTimeout(frame, 0);
}

window.setTimeout(frame, 0);

Answer 1

我实际上并不确定，但我似乎记得网络 worker 有自己的垃圾收集器，因此 GC 命中不会影响主线程中的 FPS(尽管它仍会影响更新的发送能力到主线程)