Element Creation

JavaScript performance comparison

Revision 12 of this test case created by

Preparation code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<style>
  .hidden { display: none; }
</style>
<div class="hidden" id="container">
</div>
      
<script>
Benchmark.prototype.setup = function() {
  var container = document.getElementById('container'),
      dummy = document.createElement( 'div' ),
      d = document.createElement( 'div' ),
      templates = {};
  
  function tag_ctor(tag, deep) {
    var template = document.createElement(tag);
    templates[tag] = template;
  
    window[tag] = function(attrs) {
  //    var el = templates[tag].cloneNode(false);
      var el = document.createElement( tag );
  
      el.attr = function(attrs) {
        Object.keys(attrs).forEach(function(it) {
          el.setAttribute(it, attrs[it]);
        });
        return el;
      };
  
      el.set = function() {
        el.innerHTML = '';
        el.add.apply(window, arguments);
      }
  
      el.add = function() {
        for (var i = 0; i < arguments.length; i++) {
          if (arguments[i].nodeType === 1 || arguments[i].nodeType === 11) {
            el.appendChild(arguments[i]);
          } else {
            el.appendChild(document.createTextNode(arguments[i]));
          }
        }
        return el;
      };
  
      return el;
    }
  }
  
  window.text = function(content) {
    return document.createTextNode(content);
  };
  
  ['p', 'div', 'span', 'strong', 'em', 'img', 'table', 'tr', 'td', 'th', 'thead', 'tbody', 'tfoot', 'pre', 'code', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'ul', 'ol', 'li', 'form', 'input', 'textarea', 'legend', 'fieldset', 'select', 'option', 'blockquote', 'cite', 'br', 'hr', 'dd', 'dl', 'dt', 'address', 'a', 'button', 'abbr', 'acronym', 'script', 'link', 'style', 'bdo', 'ins', 'del', 'object', 'param', 'col', 'colgroup', 'optgroup', 'caption', 'label', 'dfn', 'kbd', 'samp', 'var', 'header', 'section', 'aside', 'details', 'nav'].forEach(function(tag) {
    tag_ctor(tag);
  });
  
  function collect(root) {
    var collection = {},
        stack = [],
        n;
    if (root.nodeType !== 1) {
      return collection;
    }
    stack.push(root);
    while (stack.length !== 0) {
      n = stack.pop();
      if (n.hasAttribute('id')) {
        collection[n.getAttribute('id')] = n;
      }
      var i = n.childNodes.length;
      while (i) {
        i--;
        if (n.childNodes[i].nodeType === 1) {
          stack.push(n.childNodes[i]);
        }
      }
    }
    return collection;
  }
  
  var alarm_text = 
  	'<div style="margin-bottom: 25px;"> \
  		<div style="width: 840px; margin: 10px;"> \
  			<div id="icon" class="ilb alarm" style="white-space: nowrap; padding-top: 10px;> \
  			<div id="message" class="ilb alarm" style="width: 380px;"></div> \
  			<div class="ilb alarm" style="width: 40px; color: #cccccc; font-size: 20px; padding-top: 10px;">@</div> \
  			<div id="locations" class="ilb alarm" style="width: 210px; color: #999999;"></div> \
  			<div id="time" class="ilb alarm" style="width: 100px; color: #999999;"> </div> \
  		</div> \
  		<details id="nested" style="display: none; margin: 10px;"></details> \
  	</div>',
  alarm_template =
  	div().attr({ style: 'margin-bottom: 25px;' }).add(
  		div().attr({ style: 'width: 840px; margin: 10px;' }).add(
  			div().attr({ id: 'icon', class: 'ilb alarm', style: 'white-space: nowrap; padding-top: 10px;' }),
  			div().attr({ id: 'message', class: 'ilb alarm', style: 'width: 380px;' }),
  			div().attr({ class: 'ilb alarm', style: 'width: 40px; color: #cccccc; font-size: 20px; padding-top: 10px;' }).add( '@' ),
  			div().attr({ id: 'locations', class: 'ilb alarm', style: 'width: 210px; color: #999999;' }),
  			div().attr({ id: 'time', class: 'ilb alarm', style: 'width: 100px; color: #999999;' })
  		),
  		details().attr({ id: 'nested', style: 'display: none; margin: 10px;' })
  	);
  
  dummy.innerHTML = alarm_text;
  
  var alarm_template_text = dummy.childNodes[ 0 ];

};
</script>

Preparation code output

<style> .hidden { display: none; } </style> <div class="hidden" id="container"> </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
A
container.innerHTML = alarm_text;
var jq = $(container);
jq.find('icon');
jq.find('message');
jq.find('locations');
jq.find('time');
jq.find('nested');
pending…
B
var a,b,c,d,e;
container.appendChild(
div().attr({ style: 'margin-bottom: 25px;' }).add(
		div().attr({ style: 'width: 840px; margin: 10px;' }).add(
			a = div().attr({ id: 'icon', class: 'ilb alarm', style: 'white-space: nowrap; padding-top: 10px;' }),
			b = div().attr({ id: 'message', class: 'ilb alarm', style: 'width: 380px;' }),
			div().attr({ class: 'ilb alarm', style: 'width: 40px; color: #cccccc; font-size: 20px; padding-top: 10px;' }).add( '@' ),
			c = div().attr({ id: 'locations', class: 'ilb alarm', style: 'width: 210px; color: #999999;' }),
			d = div().attr({ id: 'time', class: 'ilb alarm', style: 'width: 100px; color: #999999;' })
		),
		e = details().attr({ id: 'nested', style: 'display: none; margin: 10px;' })
	)
);
pending…
C
container.appendChild( alarm_template.cloneNode( true ));
var els = collect( container );

//d.cloneNode( true );
pending…
container.innerHTML = alarm_text;
var els = collect( container );

//document.createElement( 'div' );
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