| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Object Scope Access Test</title> |
| <script> |
| |
| // This test is pretty slow in Chrome, a lot faster in Opera and even faster in Firefox. |
| function ClassWithThisEverywhere(n) { |
| this.a = 1, this.sum = 0, this.count = n || 10000000; |
| this.unnamed = function() { |
| for (var i = 0; i < this.count; i++) this.sum += this.a; |
| } |
| this.named = function calcWithThisEverywhere() { |
| for (var i = 0; i < this.count; i++) this.sum += this.a; |
| } |
| } |
| |
| // This test runs relatively fast in Chrome and Firefox. This is the only test with a difference between the |
| // unnamed and named versions. The named version is horribly slow in Opera. |
| function ClassWithoutThis(n) { |
| var a = 1, sum = 0, count = n || 10000000; |
| this.unnamed = function() { |
| for (var i = 0; i < count; i++) sum += a; |
| } |
| this.named = function calcWithoutThis() { |
| for (var i = 0; i < count; i++) sum += a; |
| } |
| } |
| |
| // This is the fastest of the three tests in all browsers. |
| function ClassLocal(n) { |
| this.unnamed = function() { |
| var a = 1, sum = 0, count = n || 10000000; |
| for (var i = 0; i < count; i++) sum += a; |
| } |
| this.named = function calcLocal() { |
| var a = 1, sum = 0, count = n || 10000000; |
| for (var i = 0; i < count; i++) sum += a; |
| } |
| } |
| |
| // Benchmark stuff and a bit eye candy... |
| function setUp(n) { |
| objectWithThisEverywhere = new ClassWithThisEverywhere(n); |
| objectWithoutThis = new ClassWithoutThis(n); |
| objectLocal = new ClassLocal(n); |
| } |
| |
| function prettyTest(id, t) { |
| var t1 = new Date().getTime(); |
| if (!this.times) { |
| this.times = []; |
| } |
| |
| if (typeof id !== 'undefined') { |
| this.times[id] = t1 - t; |
| } |
| var min = -1, max = -1; |
| for (var i = this.times.length; i--; ) { |
| min = min < 0 ? this.times[i] : Math.min(min, this.times[i]); |
| max = Math.max(max, this.times[i]); |
| } |
| for (var i = this.times.length; i--; ) { |
| var e = document.getElementById('id' + i); |
| if (this.times.length < 6) { |
| e.firstChild.data = this.times[i] ? this.times[i] + ' ms' : '?'; |
| } else { |
| e.firstChild.data = this.times[i] ? Math.round(this.times[i] * 10 / min) * 10 + ' percent of the time' : '?'; |
| } |
| |
| if (this.times[i] > min * 6) { |
| e.className = 'bad'; |
| } else if (this.times[i] < min * 2) { |
| e.className = 'top'; |
| } else { |
| e.className = ''; |
| } |
| } |
| return new Date().getTime(); |
| } |
| |
| function test() { |
| var t = prettyTest(); |
| objectWithThisEverywhere.unnamed(); |
| t = prettyTest(0, t); |
| objectWithThisEverywhere.named(); |
| t = prettyTest(1, t); |
| objectWithoutThis.unnamed(); |
| t = prettyTest(2, t); |
| objectWithoutThis.named(); |
| t = prettyTest(3, t); |
| objectLocal.unnamed(); |
| t = prettyTest(4, t); |
| objectLocal.named(); |
| prettyTest(5, t); |
| } |
| </script> |
| |
| <style> |
| body { font-family: sans-serif; line-height: 1.4em; } |
| sup { color: #666; font-weight: bold; line-height: 0; } |
| var { background: #DDD; border-radius: .2em; font-style: normal; font-weight: bold; padding: 0 .5em; } |
| .top { background: #6D0; } |
| .bad { background: #D60; color: #FFF; } |
| </style> |
| </head> |
| <body> |
| <ul> |
| <li><var id="id0">?</var> for accessing class variables with <code>this</code> added everywhere<sup>[w]</sup></li> |
| <li><var id="id1">?</var> for accessing class variables with <code>this</code> added everywhere (using a named function)<sup>[w]</sup></li> |
| <li><var id="id2">?</var> for accessing class variables without using <code>this</code><sup>[m]</sup></li> |
| <li><var id="id3">?</var> for accessing class variables without using <code>this</code> (using a named function)<sup>[m]</sup><sup>[o]</sup></li> |
| <li><var id="id4">?</var> for accessing local variables</li> |
| <li><var id="id5">?</var> for accessing local variables (using a named function)</li> |
| </ul> |
| <p> |
| <sup>[m]</sup> Mozilla Firefox loses here (about 4 times slower than the fastest method).<br> |
| <sup>[o]</sup> Triggers a bug in Opera (100 times slower than the fastest method).<br> |
| <sup>[w]</sup> WebKit loses here.<br> |
| </p> |
| </body> |
| <script src="../test.js"></script> |
| </html> |