Geek Answers Handbook

Javascript: object copy, global var and performance

I have a pretty tricky question :)

I am currently working on a html5 game. The variables that relate to the game map are in a separate file (let it be called game.js), separated from the game engine (call it engine.js).

I read that global variables are slower to use in JS than local variables. So in game.js, I create a global variable containing all the variables related to the game. In engine.js, I copy this global object to local variables, there I delete this global object.

It works. But I know that assigning objects only passes a reference to these objects.

So my question is: will the performance be as if I would declare all the variables directly as local variables in engine.js since I would delete the global object at the end of initialization or would it be slower as if my local variables in engine.js were just references to a global object?

I can declare all variables as local in engine.js, but it would be useful for me to separate what is typical for a map if I want to make other maps / games later.

For instance:

game.js:

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

engine.js: // ...

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

// ...

In this example, the performance of x, y and obj will be as fast as local variables, or slower?

Note. I really did not check the difference between the characteristics of global var and local var, but I assume that I read about it correctly.

I hope my question was clear enough, not stupid :) If you have any ideas ... Thank you!

+4
source share
2 answers

In modern browsers, there is probably not much difference in performance between local and global variables.

However, there is a problem with memory consumption - global variables are retained as long as the page remains open, while local variables are garbage collected after control goes out of scope. Using local variables reduces the likelihood of a memory leak .

Update

A long-term discussion in the comment thread prompted me to write a test script to measure run-time differences, contrasting with global and local access to the area.

Initially, there seemed to be no difference, and the results changed without any particular preference for one or another. However, @DaveNewton provided a counterexample that consistently shows the best performance for local variables by an order of magnitude.

Firefox 7

Milliseconds used for global access 20,000: 132

Milliseconds used for 20,000 local accesses: 159

Internet Explorer 9

Milliseconds used for global access 20,000: 1750

Milliseconds used for 20,000 local accesses: 1699

Google chrome 14

Milliseconds used for global access 20,000: 46

Milliseconds used for 20,000 local accesses: 55

Test script itself

 <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>

A counter example that demonstrates faster access to local variables.

 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 />');
+2
source

The reason for the performance difference you are talking about is how JavaScript processes the variable name to the value it refers to. Thus, the (minor) time delay is the result of viewing a javascript variable. When something is assigned by reference to something, it refers to the actual value in memory, not the name.

For example, imagine you have a javascript variable called info with the value { question: null, answer: 42 } . If you want to complete the task

 info2 = info;

You are telling javascript to find this value right now and use it when accessing info2 . Now both info and info2 point to the same value (same memory address). You do not tell javascript to find the info link and get that value every time you use info2 . This means that the way you do this is great, as you only look at references to global variables once.

Please note that javascript will assign by reference only for constants, therefore:

 var a = 1; var b = a; var a = 2; var b === 1; // => true var z = { a: 1 }; var y = z; za = 2; ya === 2; // => true

Primitive values ​​are constants, objects are not.

+2
source

More articles:


All Articles