Element Creation

JavaScript performance comparison

Revision 8 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'),
        templates = {};
    
    function tag_ctor(tag, deep) {
      var template = document.createElement(tag);
      templates[tag] = template;
    
      window[tag] = function(attrs) {
        var el = templates[tag].cloneNode(false);
    
        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;' })
        );
  };
</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
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 );
 pending… 
container.innerHTML = alarm_text;
var els = collect( container );
 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