Element Creation

JavaScript performance comparison

Revision 18 of this test case created

Info

Compare various methods of creating DOM elements.

Preparation code

<script src="//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 = {};
   
    Element.prototype._class = function(c) {
      this.className = n;
      return this;
    };
   
    Element.prototype._style = function(s) {
      this.className = s;
      return this;
    };
   
    Element.prototype._attr = function(attrs) {
      var src = this;
      Object.keys(attrs).forEach(function(it) {
        src.setAttribute(it, attrs[it]);
      });
      return this;
    };
   
    Element.prototype._add = function() {
      for (var i = 0; i < arguments.length; i++) {
        if (arguments[i].nodeType === 1 || arguments[i].nodeType === 11) {
          this.appendChild(arguments[i]);
        } else {
          this.appendChild(text(arguments[i]));
        }
      }
      return this;
    };
   
    function tag_ctor(tag, deep) {
      var template = document.createElement(tag);
      templates[tag] = template;
   
      window[tag] = function(attrs) {
        return templates[tag].cloneNode(false);
      }
    }
   
    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>'
;
   
    dummy.innerHTML = alarm_text;
   
    var alarm_template_text = dummy.childNodes[0];
};
</script>

Preparation code output

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
innerHTML + find
container.innerHTML = alarm_text;
var jq = $(container);
jq.find('icon');
jq.find('message');
jq.find('locations');
jq.find('time');
jq.find('nested');
pending…
builder + capture
// async test
var a,b,c,d,e;
container.appendChild(
        div()._style( 'margin-bottom: 25px;' )._add(
                div()._style( 'width: 840px; margin: 10px;' )._add(
                        a = div()._class( 'ilb alarm' )._style( 'white-space: nowrap; padding-top: 10px;' ),
                        b = div()._class( 'ilb alarm' )._style( 'width: 380px;' ),
                        div()._class( 'ilb alarm' )._style( 'width: 40px; color: #cccccc; font-size: 20px; padding-top: 10px;' )._add( '@' ),
                        c = div()._class( 'ilb alarm' )._style( 'width: 210px; color: #999999;' ),
                        d = div()._class( 'ilb alarm' )._style( 'width: 100px; color: #999999;' )
                ),
                e = details()._style( 'display: none; margin: 10px;' )
        )
);
pending…
innerHTML + collect
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. Here’s a list of current revisions for this page:

0 comments

Add a comment