Js performance under memory load, with big DOM

JavaScript performance comparison

Revision 5 of this test case created by Chris M Balz

Preparation code

<div id="jsperf-mem-load-big-dom">
</div>
      
<script>
Benchmark.prototype.setup = function() {
  var innerHTML = '',
      previous, i;
  
  this.testSuiteName = "Js performance under memory load";
  this.maxForLoad      = 999999,
  this.maxForAccess    =  99999,
  this.maxForDomLoad   =   9999,
  this.retrievalFactor =  20000,
  this.totalLength  =      0,
  this.timeToDeallocate = 1000 * 2; // Allow 2 seconds for the browser to de-allocate the memory.
  this.js_mem_load     = []; 
  this.js_value_access = [];
  
  console.log("Running set-up for suite: " + this.testSuiteName);
  
  // Create a significant memory load:
  for( i = 0; i < this.maxForLoad; i++ ) {
     previous = this.js_mem_load.length ? this.js_mem_load[ i-1 ] : "";
     this.js_mem_load.push( "y" + previous );
  }
  
  for( i = 0; i < this.maxForAccess; i++ ) {
     this.js_value_access.push(this.js_mem_load[ i ]);
  }
  
  for( i = 0; i < this.maxForDomLoad; i++ ) {
   innerHTML += '<table><tr><td>foo</td><td>bar</td></tr><tr><td>bat</td><td>baz</td></tr></table>';
  }
  
  document.getElementById('jsperf-mem-load-big-dom').innerHTML = innerHTML;
  
  console.log( 'Added big memory load.' );

};

Benchmark.prototype.teardown = function() {
  this.js_value_access = this.js_mem_load = null;

};
</script>

Preparation code output

<div id="jsperf-mem-load-big-dom"> </div>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
Property Value Access Under Big Memory Released
// async test
var totalLength = 0,
    that = this,
    h, i;

this.js_mem_load = null; 
document.getElementById('jsperf-mem-load-big-dom').innerHTML = 'foo-bar';

console.log("Released the big memory load.");

setTimeout( waitForDeallocation, this.timeToDeallocate ); // Give the browser time to physically release the memory from heap.

function waitForDeallocation() {
    for( h = 0; h < that.retrievalFactor; h++ ) {
        for( i = 0; i < that.maxForAccess; i++ ) {
            totalLength += that.js_value_access[i].length;    
        }
    }
    console.log( "Property Value Access Under Big Memory Released Test is done" );
    deferred.resolve();
}
pending…
Property Value Access Under Big Memory Allocation
// async test
var totalLength = 0,
    that = this,
    h, i;

setTimeout( waitForDeallocation, this.timeToDeallocate ); // We aren't de-allocating here, but to make it the same ("fair") as the de-allocated test, we wait.

function waitForDeallocation() {
    for( h = 0; h < that.retrievalFactor; h++ ) {
        for( i = 0; i < that.maxForAccess; i++ ) {
            totalLength += that.js_value_access[i].length;    
        }
    }
    console.log( "Property Value Access Under Big Memory Allocation Test is done." );
    deferred.resolve();
}
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL.

0 Comments