I was very surprised today to discover performace differences between global variables and local variables in both Firefox and IE.
The results were rather surprising to me, I thought there shouldn’t be a performance difference between global variables and local variables… ok it makes sense to make locally defined variables explicitly local by using the var keyword (preventing a lookup for the variable? But such a simplistic test as the one below wouldn’t make much difference … surely?
Well, I’m running Firefox 2.0.0.7 (so many o’s) and IE 6.0.2800.1106…. Yeah I almost supplied a picture. But in Firefox I get:
79ms
46ms
219ms
78ms
47ms
finished
And in IE I get:
266ms
250ms
781ms
266ms
250ms
finished
Now why is Firefox so much faster than IE at this? It seems to be statistically significant that local is faster than global variables… but should I care… and why is using the window interface so slow in both Firefox and IE?
The code I used is below (I used csharpformat to format the code for this blog and then I replaced the class tags with style tags and pasted in css format over the class attributes - as I could include the css here - though now I write this I suspect the style link tag would have worked!)
1: 2: <html> 3: <head> 4: <script language=”javascript”> 5: var x = {“FirstName”:“Michael”}; 6: 7: function test1() { 8: return x.FirstName; 9: } 10: 11: function test2(z) { 12: return z.FirstName; 13: } 14: 15: function test3() { 16: return window.x.FirstName; 17: } 18: 19: function runTests(testSize) { 20: var xx = {“FirstName”:“Michael”}; 21: 22: var time2 = 0; 23: var time = new Date().getTime(); 24: for(var i=0; i<testSize; i++){ 25: test1(); 26: } 27: time2 = new Date().getTime(); 28: report(“test2″, time2 - time); 29: time = new Date().getTime(); 30: 31: for(var i=0; i<testSize; i++){ 32: test2(xx); 33: } 34: time2 = new Date().getTime(); 35: report(“test3″, time2 - time); 36: time = new Date().getTime(); 37: 38: for(var i=0; i<testSize; i++){ 39: test3(); 40: } 41: time2 = new Date().getTime(); 42: report(“test3″, time2 - time); 43: time = new Date().getTime(); 44: 45: for(var i=0; i<testSize; i++){ 46: test2(x); 47: } 48: time2 = new Date().getTime(); 49: report(“test3″, time2 - time); 50: time = new Date().getTime(); 51: var z = x; 52: for(var i=0; i<testSize; i++){ 53: test2(z); 54: } 55: time2 = new Date().getTime(); 56: report(“test4″, time2 - time); 57: 58: var el = document.getElementById(“test_space”); 59: el.innerHTML += “finished<hr/>”; 60: } 61: 62: function report(s, t){ 63: var el = document.getElementById(“test_space”); 64: el.innerHTML += t + “ms<br/>”; 65: } 66: 67: </script> 68: </head> 69: <body> 70: <input type=”button”
onclick=”javascript:runTests(100000)” value=”run test”/> 71: 72: <div id=”test_space”> 73: </div> 74: </body> 75: </html>
