Element Creation

JavaScript performance comparison

Revision 7 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'),
        a, b, c, d, e, f, basis = {};
   
    function tag_ctor(tag, deep) {
      basis[tag] = document.createElement(tag);
      window[tag] = function(attrs) {
        var el = basis[tag].cloneNode(deep);
   
        el.attr = function(attrs) {
          Object.keys(attrs).forEach(function(it) {
            el.setAttribute(it, attrs[it]);
          });
          return el;
        };
   
        el.add = function() {
          for (var i = 0; i < arguments.length; i++) {
            el.appendChild(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'].forEach(function(tag) {
      tag_ctor(tag);
    });
};
</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
var t = $( '<div style=""> \
        <div id="paper-group" style="display: inline-block; vertical-align: top; margin-left: 15px;"> \
                <div> \
                        <div class="separator"><div class="separator-caption">(~Paper Properties~)</div></div> \
                        <div id="paper-properties" style="width: 370px;"> \
                                <div class="ctrl-region"> \
                                        <div class="h-label">(~Thickness~)(~:~)</div> \
                                        <div id="paper-thickness" class="ilb-mid"></div> \
                                </div> \
                                <div class="ctrl-region"> \
                                        <div class="h-label">(~Measured width~)(~:~)</div> \
                                        <div id="measured-paper-width" class="ilb-mid"></div> \
                                </div> \
                                <div id="override-width" class="ctrl-region"> \
                                        <div id="override-measured-width" class="ilb-mid" style="padding-left: 10px;"></div> \
                                        <div class="setting-label" style="display: inline-block; vertical-align: middle; width: 250px;">(~Override measured width~)</div> \
                                </div> \
                                <div class="ctrl-region"> \
                                        <div class="h-label">(~Paper width~)(~:~)</div> \
                                        <div id="paper-width" class="ilb-mid"></div> \
                                </div> \
                        </div> \
                </div> \
        </div> \
        <div id="print-settings-group" style="display: inline-block; vertical-align: top; margin-left: 25px;"> \
                <div> \
                        <div class="separator"><div class="separator-caption">(~Print Settings~)</div></div> \
                        <div id="print-settings" style="width: 530px;"></div> \
                </div> \
                <div id="bonding-agent"></div> \
                <div>(~Note: Bonding agent density is edited in Color Adjustments screen~)</div> \
        </div> \
</div>'
);
t.find( 'paper-thickness' );
t.find( 'measured-paper-width' );
t.find( 'override-width' );
t.find( 'override-measured-width' );
t.find( 'paper-width' );
t.find( 'paper-group' );
pending…
B
div().add(
        f = div().attr({ id: 'paper-group', style: 'display: inline-block; vertical-align: top; margin-left: 15px;' }).add(
                div().add(
                        div().attr({ class: 'separator' }).add( div().attr({ class: 'separator-caption' }).add( text( "~Paper Properties~" ))),
                        div().attr({ id: 'paper-properties', style: 'width: 370px;' }).add(
                                div().attr({ class: 'ctrl-region' }).add(
                                        div().attr({ class: 'h-label' }).add( text( "~Thickness~"+"~:~" )),
                                        a = div().attr({ id: 'paper-thickness', class: 'ilb-mid' })
                                ),
                                div().attr({ class: 'ctrl-region' }).add(
                                        div().attr({ class: 'h-label' }).add( text( "~Measured width~"+"~:~" )),
                                        b = div().attr({ id: 'measured-paper-width', class: 'ilb-mid' })
                                ),
                                c = div().attr({ id: 'override-width', class: 'ctrl-region' }).add(
                                        d = div().attr({ id: 'override-measured-width', class: 'ilb-mid', style: 'padding-left: 10px;' }),
                                        div().attr({ style: 'display: inline-block; vertical-align: middle; width: 250px;' }).add( text( "~Override measured width~" ))
                                ),
                                div().attr({ class: 'ctrl-region' }).add(
                                        div().attr({ class: 'h-label' }).add( text( "~Paper width~"+"~:~" )),
                                        e = div().attr({ id: 'paper-width', class: 'ilb-mid' })
                                )
                        )
                )
        ),
        div().attr({ id: 'print-settings-group', style: 'display: inline-block; vertical-align: top; margin-left: 25px;' }).add(
                div().add(
                        div().attr({ class: 'separator' }).add( div().attr({ class: 'separator-caption' }).add( text( "~Print Settings~" ))),
                        div().attr({ id: 'print-settings', style: 'width: 530px;' })
                ),
                div().attr({ id: 'bonding-agent' }),
                text( "~Note: Bonding agent density is edited in Color Adjustments screen~" )
        )
);
$(a);
$(b);
$(c);
$(d);
$(e);
$(f);
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