DOM creation libraries

JavaScript performance comparison

Revision 2 of this test case created by Kory Nunn

Info

Tests a number of ways of generating DOM.

Removed straight string insertion as it is not a comparable test, there is no method for storing DOM nodes in variables for later modification short of querying the DOM after insertion.

Preparation code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script src="https://raw.github.com/KoryNunn/crel/master/crel.js">
</script>
<script src="https://raw.github.com/joestelmach/laconic/master/laconic.js">
</script>
<script>
Benchmark.prototype.setup = function() {
    $('body').append(crel('div', {
      'class': 'testDiv'
    }));
    var testDiv = $('.testDiv')[0];
   
   
    function randomInt(){
        return parseInt(Math.random() * 11);
    }
   
    var strings = ['hello','world','thing','stuff','majig','whats','keeps','five ', 'chars','lengt'];
   
    function randomString(){
        return strings[randomInt()];
    }
   
    var googleLink = 'http://www.google.com',
        idString = 'someId';
};

Benchmark.prototype.teardown = function() {
    $('.testDiv').remove();
};
</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
document.createElement
// lazily created via https://github.com/KoryNunn/dom-to-js
// Probably not the fastest, and definitely not the best way to do it,
// but hey, its auto-generated..
testDiv.appendChild((function() {
  var element = document.createElement("section");


  var child0 = (function() {
    var element = document.createElement("h1");


    var child0 = document.createTextNode(randomString());
    element.appendChild(child0);

    return element;
  })();
  element.appendChild(child0);


  var child1 = (function() {
    var element = document.createElement("h2");


    var child0 = document.createTextNode(randomString());
    element.appendChild(child0);

    return element;
  })();
  element.appendChild(child1);


  var child2 = (function() {
    var element = document.createElement("br");
    return element;
  })();
  element.appendChild(child2);


  var child3 = (function() {
    var element = document.createElement("button");
    element.setAttribute("class", randomString());


    var child0 = document.createTextNode(randomString());
    element.appendChild(child0);

    return element;
  })();
  element.appendChild(child3);


  var child4 = (function() {
    var element = document.createElement("button");
    element.setAttribute("class", randomString());


    var child0 = document.createTextNode(randomString());
    element.appendChild(child0);

    return element;
  })();
  element.appendChild(child4);


  var child5 = (function() {
    var element = document.createElement("button");
    element.setAttribute("class", randomString());


    var child0 = document.createTextNode(randomString());
    element.appendChild(child0);

    return element;
  })();
  element.appendChild(child5);


  var child6 = (function() {
    var element = document.createElement("button");
    element.setAttribute("class", randomString());


    var child0 = document.createTextNode(randomString());
    element.appendChild(child0);

    return element;
  })();
  element.appendChild(child6);


  var child7 = (function() {
    var element = document.createElement("button");
    element.setAttribute("class", randomString());


    var child0 = document.createTextNode(randomString());
    element.appendChild(child0);

    return element;
  })();
  element.appendChild(child7);


  var child8 = (function() {
    var element = document.createElement("button");
    element.setAttribute("class", randomString());


    var child0 = document.createTextNode(randomString());
    element.appendChild(child0);

    return element;
  })();
  element.appendChild(child8);


  var child9 = (function() {
    var element = document.createElement("span");
    element.setAttribute("class", randomString());


    var child0 = (function() {
      var element = document.createElement("a");
      element.setAttribute("href", googleLink);


      var child0 = document.createTextNode(randomString());
      element.appendChild(child0);

      return element;
    })();
    element.appendChild(child0);

    return element;
  })();
  element.appendChild(child9);


  var child10 = document.createTextNode(randomString() + randomString() + randomString());
  element.appendChild(child10);


  var child11 = (function() {
    var element = document.createElement("table");
    element.setAttribute("id", idString);


    var child0 = (function() {
      var element = document.createElement("thead");


      var child0 = (function() {
        var element = document.createElement("tr");


        var child0 = (function() {
          var element = document.createElement("th");


          var child0 = document.createTextNode(randomString());
          element.appendChild(child0);

          return element;
        })();
        element.appendChild(child0);


        var child1 = (function() {
          var element = document.createElement("th");


          var child0 = document.createTextNode(randomString());
          element.appendChild(child0);

          return element;
        })();
        element.appendChild(child1);


        var child2 = (function() {
          var element = document.createElement("th");


          var child0 = document.createTextNode(randomString());
          element.appendChild(child0);

          return element;
        })();
        element.appendChild(child2);


        var child3 = (function() {
          var element = document.createElement("th");


          var child0 = document.createTextNode(randomString());
          element.appendChild(child0);

          return element;
        })();
        element.appendChild(child3);

        return element;
      })();
      element.appendChild(child0);

      return element;
    })();
    element.appendChild(child0);


    var child1 = (function() {
      var element = document.createElement("tbody");


      var child0 = (function() {
        var element = document.createElement("tr");


        var child0 = (function() {
          var element = document.createElement("td");


          var child0 = document.createTextNode(randomInt());
          element.appendChild(child0);

          return element;
        })();
        element.appendChild(child0);


        var child1 = (function() {
          var element = document.createElement("td");


          var child0 = document.createTextNode(randomInt());
          element.appendChild(child0);

          return element;
        })();
        element.appendChild(child1);


        var child2 = (function() {
          var element = document.createElement("td");


          var child0 = document.createTextNode(randomInt());
          element.appendChild(child0);

          return element;
        })();
        element.appendChild(child2);


        var child3 = (function() {
          var element = document.createElement("td");


          var child0 = document.createTextNode(randomInt());
          element.appendChild(child0);

          return element;
        })();
        element.appendChild(child3);

        return element;
      })();
      element.appendChild(child0);

      return element;
    })();
    element.appendChild(child1);

    return element;
  })();
  element.appendChild(child11);

  return element;
})());
pending…
jQuery
$(testDiv).append(
$('<section>').append(
$('<h1>').text(randomString()), $('<h2>').text(randomString()), $('<br>'), $('<button>').addClass(randomString()).text(randomString()), $('<button>').addClass(randomString()).text(randomString()), $('<button>').addClass(randomString()).text(randomString()), $('<button>').addClass(randomString()).text(randomString()), $('<button>').addClass(randomString()).text(randomString()), $('<button>').addClass(randomString()).text(randomString()), $('<span>').addClass(randomString()).append(
$('<a>').attr('href', googleLink).text(randomString())), randomString() + randomString() + randomString(), $('<table>').attr('id', idString).append(
$('<thead>').append(
$('<tr>').append(
$('<th>').text(randomString()), $('<th>').text(randomString()), $('<th>').text(randomString()), $('<th>').text(randomString()))), $('<tbody>').append(
$('<tr>').append(
$('<td>').text(randomInt()), $('<td>').text(randomInt()), $('<td>').text(randomInt()), $('<td>').text(randomInt()))))));
pending…
laconic
// created via https://github.com/KoryNunn/dom-to-js with laconic plugin
testDiv.appendChild(
$.el.section(
$.el.h1(randomString()), $.el.h2(randomString()), $.el.br(), $.el.button({
  "class": randomString()
}, randomString()), $.el.button({
  "class": randomString()
}, randomString()), $.el.button({
  "class": randomString()
}, randomString()), $.el.button({
  "class": randomString()
}, randomString()), $.el.button({
  "class": randomString()
}, randomString()), $.el.button({
  "class": randomString()
}, randomString()), $.el.span({
  "class": randomString()
}, $.el.a({
  "href": googleLink
}, randomString())), randomString() + randomString() + randomString(), $.el.table({
  "id": idString
}, $.el.thead(
$.el.tr(
$.el.th(randomString()), $.el.th(randomString()), $.el.th(randomString()), $.el.th(randomString()))), $.el.tbody(
$.el.tr(
$.el.td(randomInt()), $.el.td(randomInt()), $.el.td(randomInt()), $.el.td(randomInt()))))));
pending…
crel
testDiv.appendChild(
crel('section', crel('h1', randomString()), crel('h2', randomString()), crel('br'), crel('button', {
  "class": randomString()
}, randomString()), crel('button', {
  "class": randomString()
}, randomString()), crel('button', {
  "class": randomString()
}, randomString()), crel('button', {
  "class": randomString()
}, randomString()), crel('button', {
  "class": randomString()
}, randomString()), crel('button', {
  "class": randomString()
}, randomString()), crel('span', {
  "class": randomString()
}, crel('a', {
  "href": googleLink
}, randomString())), randomString() + randomString() + randomString(), crel('table', {
  "id": idString
}, crel('thead', crel('tr', crel('th', randomString()), crel('th', randomString()), crel('th', randomString()), crel('th', randomString()))),
crel('tbody', crel('tr', crel('td', randomInt()), crel('td', randomInt()), crel('td', randomInt()), crel('td', randomInt()))))));
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