Home/ Questions/Q 6643257
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T00:01:48+00:00

I have a quite complicated question to ask :) I am currently working on

  • 0

I have a quite complicated question to ask 🙂

I am currently working on a html5 canvas game. The variables which are specific to a map of the game are in a separate file (let’s call it game.js), separated from the game engine (let’s call it engine.js).

I have read that global variables are slower to use in JS than local variables. Therefore, in game.js, I create a global variable which contains all the game-specific variables. In engine.js, I copy this global object to local variables, there I delete this global object.

This is working. But I know that assigning objects only pass a reference to these objects.

Therefore my question is: will the performance of that be as if I had declared all the variables directly as local variables in engine.js, as I delete the global object at the end of the initialisation, or will it be slower, as if my local variables in engine.js were just references to a global object?

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

For example:

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, will the performance of x, y and obj be as fast as local variables, or slower?

Note: I didn’t really check the difference between performances of global vars, and local vars, but I assume what I read about it is right.

Hope my question was clear enough and not silly 🙂 If you have any ideas… Thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    In modern browsers, there probably isn’t much performance difference between local and global variables.

    However there is an issue with memory consumption – global variables persist as long as the page stays open whereas local variables are garbage collected after control leaves their scope. Using local variables reduces the chance of having a memory leak.

    Update

    The long-winded discussion in the comment thread prompted me to write a test script to measure execution speed differences contrasting global and local scope access.

    Initially there seemed to be no difference and results vary with no specific preference towards one or the other. However @DaveNewton provided a counterexample which consistently shows better performance for local variables by an order of magnitude.

    Firefox 7

    Milliseconds used for 20000 global accesses: 132

    Milliseconds used for 20000 local accesses: 159

    Internet Explorer 9

    Milliseconds used for 20000 global accesses: 1750

    Milliseconds used for 20000 local accesses: 1699

    Google Chrome 14

    Milliseconds used for 20000 global accesses: 46

    Milliseconds used for 20000 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, demonstrating 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 />');
    • 0