4

我有一个相当复杂的问题要问:)

我目前正在开发一个 html5 画布游戏。特定于游戏地图的变量位于一个单独的文件中（我们称之为 game.js），与游戏引擎（我们称之为 engine.js）分开。

我读过在 JS 中使用全局变量比使用局部变量要慢。因此，在 game.js 中，我创建了一个包含所有游戏特定变量的全局变量。在engine.js 中，我将此全局对象复制到局部变量中，然后删除此全局对象。

这是有效的。但我知道分配对象只会传递对这些对象的引用。

因此我的问题是：当我在初始化结束时删除全局对象时，它的性能是否就像我在engine.js中直接将所有变量声明为局部变量一样，还是会更慢，就像我的engine.js 中的局部变量只是对全局对象的引用？

我可以在 engine.js 中将所有变量声明为本地变量，但如果以后我想制作其他地图/游戏，分离特定于地图的内容对我很有用。

例如：

游戏.js：

Game = function() {
this.x = 16;
this.y = 16;
this.myObject = {"test": "hello", "action": "none"};
}
game = new Game();

引擎.js：//...

var x = game.x;
var y = game.y;
var obj = {"test": game.myObject.test, "action": game.myObject.action};

//...

在这个例子中，x、y 和 obj 的性能会和局部变量一样快，还是更慢？

注意：我并没有真正检查全局变量和本地变量的性能之间的差异，但我认为我读到的内容是正确的。

希望我的问题足够清楚而不是愚蠢:)如果您有任何想法...谢谢！

4

2 回答 2

2

在现代浏览器中，局部变量和全局变量之间可能没有太大的性能差异。

然而，内存消耗存在一个问题 - 只要页面保持打开状态，全局变量就会持续存在，而局部变量在控制离开其范围后会被垃圾收集。使用局部变量可以减少发生内存泄漏的机会。

更新

评论线程中的冗长讨论促使我编写了一个测试脚本来测量对比全局和本地范围访问的执行速度差异。

最初似乎没有区别，结果各不相同，对其中一个没有特别的偏好。然而@DaveNewton 提供了一个反例，它始终显示局部变量的性能提高了一个数量级。

火狐 7

用于 20000 次全局访问的毫秒数：132

用于 20000 次本地访问的毫秒数：159

互联网浏览器 9

用于 20000 次全局访问的毫秒数：1750

用于 20000 次本地访问的毫秒数：1699

谷歌浏览器 14

用于 20000 次全局访问的毫秒数：46

用于 20000 次本地访问的毫秒数：55

测试脚本本身

<html>
<head>
<script type="text/javascript">

function t() {

var test = function () {}
test.issue = new String("hello");

var start = new Date().getTime();
(function() {
    (function() {
        (function() {
            (function() {
                (function() {
                    (function() {
                        (function() {
                            var a = document.getElementById("a");
                            for (var i = 0; i < 20000; i++) {
                                a.innerHTML = test.issue.toString();
                            }
                            a = null;
                        })();
                    })();
                })();
            })();
        })();
    })();
})();
var stop = new Date().getTime();
document.getElementById("a").innerHTML = "Milliseconds used for 20000 global accesses: " + (stop - start);


var start = new Date().getTime();
(function() {
    (function() {
        (function() {
            (function() {
                (function() {
                    (function() {
                        (function() {
                            var c = document.getElementById("c");
                            var testx = {};
                            testx.issue = new String("hello");
                            for (var i = 0; i < 20000; i++) {
                                c.innerHTML = testx.issue.toString();
                            }
                            c = null;
                        })();
                    })();
                })();
            })();
        })();
    })();
})();
var stop = new Date().getTime();
document.getElementById("c").innerHTML = "Milliseconds used for 20000 local accesses: " + (stop - start);

}

window.onload = function () {
    document.getElementById('b').onclick = t;
}

</script>
</head>
<body>
<div align="center"><button id="b">Run Test</button></div>
<div id="a"></div>
<div id="c"></div>
</body>

</html>

一个反例，展示了对局部变量的更快访问。

var t0 = new Date();
var i; 
for (i=0; i<10000000; i++); 
var t1 = new Date(); 
function count() { for (var i=0; i<10000000; i++); } 
var t2 = new Date(); 
count(); 
var t3 = new Date(); 
d = document; 
d.write('Without local variables = ', t1-t0, '<br />'); 
d.write('With local variables = ', t3-t2, '<br />');
于 2011-10-04T15:24:35.597 回答
2

您所说的性能差异的原因在于javascript将变量名称解析为它所引用的值的方式。所以（可以忽略不计的）时间滞后是 javascript查找变量的结果。当通过引用某物来分配某物时，它是指内存中的实际值而不是名称。

例如，假设您有一个名为 的 javascriptinfo变量{ question: null, answer: 42 }。如果你要完成任务

info2 = info;

您正在告诉 javascript立即找到该值并在引用info2. 现在两者info和info2都指向相同的值（相同的内存地址）。您不是info在告诉 javascript 在每次使用时查找引用并获取该值info2。这意味着您这样做的方式很好，因为您只查找全局变量引用一次。

请注意，javascript 只会通过引用分配非常数，因此：

var a = 1;
var b = a;
var a = 2;
var b === 1; // => true

var z = { a: 1 };
var y = z;
z.a = 2;
y.a === 2; // => true

原始值是常量，对象不是。

于 2011-10-04T15:57:53.027 回答