DOM creation libraries

Benchmark created by Kory Nunn on

Description

Tests a number of ways of generating DOM.

Preparation HTML

<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>

Setup

$('body').append(crel('div', {
      'class': 'testDiv'
    }));
    var testDiv = $('.testDiv')[0];

Teardown


    $('.testDiv').remove();

Test runner

Ready to run.

Testing in
TestOps/sec
Straight string insersion
// strings are broken up where you would likely have a variable
// This is an extremely contrived test, in reality, this kind of 
// generation would be done in small chunks,
// and would likely be much slower.
testDiv.innerHTML = '<section>' + '<h1>' + 'A title' + '</h1>' + '<h2>' + 'A sub title' + '</h2>' + '<br />' + '<button class="' + 'things' + '">' + 'THING1' + '</button>' + '<button class="' + 'things' + '">' + 'THING2' + '</button>' + '<button class="' + 'things' + '">' + 'THING3' + '</button>' + '<button class="' + 'things' + '">' + 'THING4' + '</button>' + '<button class="' + 'things' + '">' + 'THING5' + '</button>' + '<button class="' + 'things' + '">' + 'THING6' + '</button>' + '<span class="' + 'majigger' + '">' + '<a href="' + 'http://www.google.com' + '">' + 'A link' + '</a>' + '</span>' +

'Blady bla bla, some text and that.' +

'<table id="' + 'initialtests' + '">' + '<thead>' + '<tr>' + '<th>' + 'Column header' + '</th>' + '<th>' + 'another one' + '</th>' + '<th>' + 'AND ANOTHER' + '</th>' + '<th>' + 'OMG SO MANY COLUMN HEADERS' + '</th>' + '</tr>' + '</thead>' + '<tbody>' + '<tr>' + '<td>' + '1' + '</td>' + '<td>' + '2' + '</td>' + '<td>' + '3' + '</td>' + '<td>' + '4' + '</td>' + '</tr>' + '</tbody>' + '</table>' + '<section>';
ready
jQuery
$(testDiv).append(
$('<section>').append(
$('<h1>').text('A title'), $('<h2>').text('A sub title'), $('<br>'), $('<button>').addClass('things').text('THING1'), $('<button>').addClass('things').text('THING2'), $('<button>').addClass('things').text('THING3'), $('<button>').addClass('things').text('THING4'), $('<button>').addClass('things').text('THING5'), $('<button>').addClass('things').text('THING6'), $('<span>').addClass('majigger').append(
$('<a>').attr('href', 'http://www.google.com').text('A link')), 'Blady bla bla, some text and that.', $('<table>').attr('id', 'myTable').append(
$('<thead>').append(
$('<tr>').append(
$('<th>').text('Column header'), $('<th>').text('another one'), $('<th>').text('AND ANOTHER'), $('<th>').text('OMG SO MANY COLUMN HEADERS'))), $('<tbody>').append(
$('<tr>').append(
$('<td>').text('1'), $('<td>').text('2'), $('<td>').text('3'), $('<td>').text('4'))))));
ready
laconic
// created via https://github.com/KoryNunn/dom-to-js with laconic plugin
testDiv.appendChild(
$.el.section(
$.el.h1("A title"), $.el.h2("A sub title"), $.el.br(), $.el.button({
  "class": "things"
}, "THING1"), $.el.button({
  "class": "things"
}, "THING2"), $.el.button({
  "class": "things"
}, "THING3"), $.el.button({
  "class": "things"
}, "THING4"), $.el.button({
  "class": "things"
}, "THING5"), $.el.button({
  "class": "things"
}, "THING6"), $.el.span({
  "class": "majigger"
}, $.el.a({
  "href": "http://www.google.com"
}, "A link")), "Blady bla bla, some text and that.", $.el.table({
  "id": "initialtests"
}, $.el.thead(
$.el.tr(
$.el.th("Column header"), $.el.th("another one"), $.el.th("AND ANOTHER"), $.el.th("OMG SO MANY COLUMN HEADERS"))), $.el.tbody(
$.el.tr(
$.el.td("1"), $.el.td("2"), $.el.td("3"), $.el.td("4"))))));
ready
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("A title");
    element.appendChild(child0);

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


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


    var child0 = document.createTextNode("A sub title");
    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", "things");


    var child0 = document.createTextNode("THING1");
    element.appendChild(child0);

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


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


    var child0 = document.createTextNode("THING2");
    element.appendChild(child0);

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


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


    var child0 = document.createTextNode("THING3");
    element.appendChild(child0);

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


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


    var child0 = document.createTextNode("THING4");
    element.appendChild(child0);

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


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


    var child0 = document.createTextNode("THING5");
    element.appendChild(child0);

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


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


    var child0 = document.createTextNode("THING6");
    element.appendChild(child0);

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


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


    var child0 = (function() {
      var element = document.createElement("a");
      element.setAttribute("href", "http://www.google.com");


      var child0 = document.createTextNode("A link");
      element.appendChild(child0);

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

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


  var child10 = document.createTextNode("Blady bla bla, some text and that.");
  element.appendChild(child10);


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


    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("Column header");
          element.appendChild(child0);

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


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


          var child0 = document.createTextNode("another one");
          element.appendChild(child0);

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


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


          var child0 = document.createTextNode("AND ANOTHER");
          element.appendChild(child0);

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


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


          var child0 = document.createTextNode("OMG SO MANY COLUMN HEADERS");
          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("1");
          element.appendChild(child0);

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


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


          var child0 = document.createTextNode("2");
          element.appendChild(child0);

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


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


          var child0 = document.createTextNode("3");
          element.appendChild(child0);

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


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


          var child0 = document.createTextNode("4");
          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;
})());
ready
crel
testDiv.appendChild(
crel('section', crel('h1', "A title"), crel('h2', "A sub title"), crel('br'), crel('button', {
  "class": "things"
}, "THING1"), crel('button', {
  "class": "things"
}, "THING2"), crel('button', {
  "class": "things"
}, "THING3"), crel('button', {
  "class": "things"
}, "THING4"), crel('button', {
  "class": "things"
}, "THING5"), crel('button', {
  "class": "things"
}, "THING6"), crel('span', {
  "class": "majigger"
}, crel('a', {
  "href": "http://www.google.com"
}, "A link")), "Blady bla bla, some text and that.", crel('table', {
  "id": "initialtests"
}, crel('thead', crel('tr', crel('th', "Column header"), crel('th', "another one"), crel('th', "AND ANOTHER"), crel('th', "OMG SO MANY COLUMN HEADERS"))), crel('tbody', crel('tr', crel('td', "1"), crel('td', "2"), crel('td', "3"), crel('td', "4"))))));
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.