Element Creation

JavaScript performance comparison

Revision 19 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 = {};
    
    function tag_ctor(tag, deep) {
      var template = document.createElement(tag);
      templates[tag] = template;
    
    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;
                };
    
      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>',
    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

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
 
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({ class: 'ilb alarm', style: 'white-space: nowrap; _padding-top: 10px;' }),
                        b = div()._attr({ 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({ class: 'ilb alarm', style: 'width: 210px; color: #999999;' }),
                        d = div()._attr({ class: 'ilb alarm', style: 'width: 100px; color: #999999;' })
                ),
                e = details()._attr({ 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