Native DOM versus Wrapped DOM

JavaScript performance comparison

Test case created by DK

Preparation code

<div id='area'></div>
      
<script>
Benchmark.prototype.setup = function() {
  var wrappedDOM_A = function(e) {
  	this.node = document.createElement(e);
  	return this;
  }
  
  var wrappedDOM_B = function(e) {
  	this.node = document.createElement(e);
  	return this;
  }
  
  var area = document.getElementById('area');
  
  var wrappedDOM_C = function(e) {
  	this.node = document.createElement(e);
  	return this;
  }
  
  var wrappedDOM_D = function(e) {
  	this.node = document.createElement(e);
  	return this;
  }
  
  var wrappedDOM_E = function(e) {
  	this.node = document.createElement(e);
  	return this;
  }
  
  i = 1;
  while(i--) {
  	wrappedDOM_A.prototype['method' + i] = function(a) {return a * a;};
  }
  
  i = 5
  while(i--) {
  	wrappedDOM_B.prototype['method' + i] = function(a) {return a * a;};
  }
  
  i = 10
  while(i--) {
  	wrappedDOM_C.prototype['method' + i] = function(a) {return a * a;};
  }
  
  i = 15
  while(i--) {
  	wrappedDOM_D.prototype['method' + i] = function(a) {return a * a;};
  }
  
  i = 100
  while(i--) {
  	wrappedDOM_E.prototype['method' + i] = function(a) {return a * a;};
  }
  
  var area = document.getElementById('area');

};

Benchmark.prototype.teardown = function() {
  while (area.firstChild) {
      area.removeChild(area.firstChild);
  }

};
</script>

Preparation code output

<div id='area'></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
native DOM
area.appendChild(document.createElement('div'));
pending…
wrapped DOM with 1 prototype
var test = new wrappedDOM_A('div');
area.appendChild(test.node);
pending…
wrapped DOM with 5 prototype
var test = new wrappedDOM_B('div');
area.appendChild(test.node);
pending…
wrapped DOM with 10 prototype
var test = new wrappedDOM_C('div');
area.appendChild(test.node);
pending…
wrapped DOM with 15 prototype
var test = new wrappedDOM_D('div');
area.appendChild(test.node);
pending…
wrapped DOM with 100 prototype
var test = new wrappedDOM_E('div');
area.appendChild(test.node);
pending…

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

Compare results of other browsers

0 Comments