为什么修改全局变量会增加Chrome中的内存使用量

Question

最近，我一直在尝试优化JavaScript代码来制作HTML5游戏，特别针对移动浏览器。我开始比较引擎并逐渐简化比较代码，我得到了一些我不理解的东西。

案例是我注意到在Chrome中（所以我猜所有基于webkit的浏览器）修改全局变量会导致增加使用的内存。让我向您展示两个例子：

1）修改全局变量：

代码：

var globalVariable = 0;

var fps = 60;
window.onload = init;

function init () {
   setInterval (loop, 1000/fps);   
};


function loop (){

    for (var i = 0; i < 1000000; i++) {
     globalVariable =  Math.random();
    }
};

内存时间轴屏幕：

正如您所看到的，它在前10秒内有大量内存需要收集！

2）创建局部变量而不是修改全局变量：

代码保持不变，唯一的变化是在循环中添加关键字“var”。 globalVariable = Math.random（）;变为var localVariable = Math.random（）;

内存时间轴屏幕：

正如您所看到的，内存使用率非常低，前10秒它只增加了大约0.1MB。

差异真的很大！我现在无法检查，但我被告知在两个示例中的Firefox中，两种情况下的内存使用情况看起来几乎相同。

任何人都可以解释一下，或者向我指出解释它的资源吗？或者任何人都可以建议我如何修改全局变量以不增加已用内存？

Answer 1

（首先，快速咆哮'全局'变量。在Javascript中没有全局变量，有范围，包括窗口级范围）

但是，答案是从Javascript函数中的另一个范围访问变量会将其提升到当前范围。 Here's a fun explanation of the effect.