Element Creation

JavaScript performance comparison

Revision 6 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'),
        basis = {};
   
    function tag_ctor(tag, deep ) {
      basis[tag] = document.createElement(tag);
      window[tag] = function(attrs) {
        var el = basis[tag].cloneNode( deep );
   
        el.attrs = 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 template = 
        div().attrs({ id: 'div1', 'class': 'testClass testClass2' }).add(
                p().attrs({ id: 'p1' }).add(
                        text('This is some text')
                ),
                p().attrs({ id: 'p2', style: 'color: red' }).add(
                        text('This is some  more text')
                ),
                div().attrs({ id: 'div2' }).add(
                        p().attrs({ id: 'p3' }).add(
                                text('Some more stuff')
                        )
                )
        );

for( var i = 0; i < 1000; i++ ) {
        container.appendChild( template.cloneNode( true ));
}
pending…
B
for( var i = 0; i < 1000; i++ ) {
        container.appendChild(
        div().attrs({ id: 'div1', 'class': 'testClass testClass2' }).add(
                p().attrs({ id: 'p1' }).add(
                        text('This is some text')
                ),
                p().attrs({ id: 'p2', style: 'color: red' }).add(
                        text('This is some  more text')
                ),
                div().attrs({ id: 'div2' }).add(
                        p().attrs({ id: 'p3' }).add(
                                text('Some more stuff')
                        )
                )
        ));
}
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