DOM creation libraries (v19)

Revision 19 of this benchmark created on

Description

Tests a number of ways of generating DOM.

Just a version bump to reset stats after a change to crel.

Preparation HTML

<script class="nothing" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script src="https://rawgithub.com/KoryNunn/crel/master/crel.js">
</script>
<script src="https://rawgithub.com/joestelmach/laconic/master/laconic.js">
</script>
<script src="https://rawgithub.com/creationix/dombuilder/master/dombuilder.js">
</script>
<script src="https://rawgithub.com/Humtron/Wee.js/master/wee.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 insertion
// old comment was bullshit
// bad test case, creating a full table would make more sense
// too few elements to even be concerned about performance.
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
creationix/dombuilder
testDiv.appendChild(domBuilder([
  ['section', ['h1', 'A title'],
    ['h2', 'A sub title'],
    ['br'],
    ['button.things', 'THING1'],
    ['button.things', 'THING2'],
    ['button.things', 'THING3'],
    ['button.things', 'THING4'],
    ['button.things', 'THING5'],
    ['button.things', 'THING6'],
    ['span.majigger', ['a',
    {
      href: 'http://www.google.com'
    }, 'A link']], 'Blady bla bla, some text and that.', ['table#initialtests', ['thead', ['tr', ['th', 'Column header'],
      ['th', 'Another one'],
      ['th', 'And another'],
      ['th', 'OMG SO MANY COLUMN HEADERS']
    ]],
      ['tbody', ['tr', ['td', '1'],
        ['td', '2'],
        ['td', '3'],
        ['td', '4']
      ]]
    ]
  ]
]))
ready
Wee.js
testDiv.appendChild(
        new Wee("section")
                .append(
                        new Wee("h1").append("A title").self(),
                        new Wee("h2").append("A sub title").self(),
                        new Wee("br").self(),
                        new Wee("button", { "class": "things" }).append("THING1").self(),
                        new Wee("button", { "class": "things" }).append("THING2").self(),
                        new Wee("button", { "class": "things" }).append("THING3").self(),
                        new Wee("button", { "class": "things" }).append("THING4").self(),
                        new Wee("button", { "class": "things" }).append("THING5").self(),
                        new Wee("button", { "class": "things" }).append("THING6").self(),
                        new Wee("span", { "class": "majigger" }).append(
                                new Wee("a", { "href": "http://www.google.com" }).append("A link").self()
                        )
                        .self(),
                        "Blady bla bla, some text and that.",
                        new Wee("table", { "id": "myTable" })
                                .append(
                                        new Wee("thead")
                                                .append(
                                                        new Wee("tr")
                                                                .append(
                                                                        new Wee("th").append("Column header").self(),
                                                                        new Wee("th").append("another one").self(),
                                                                        new Wee("th").append("AND ANOTHER").self(),
                                                                        new Wee("th").append("OMG SO MANY COLUMN HEADERS").self()
                                                                )
                                                                .self()
                                                )
                                                .self(),
                                        new Wee("tbody")
                                                .append(
                                                        new Wee("tr")
                                                                .append(
                                                                        new Wee("td").append("1").self(),
                                                                        new Wee("td").append("2").self(),
                                                                        new Wee("td").append("3").self(),
                                                                        new Wee("td").append("4").self()
                                                                )
                                                                .self()
                                                )
                                                .self()
                                )
                                .self()
                )
                .self()
);
 
ready
jQuery.html()
$(testDiv).html([
'<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>'
].join(""));
ready
Straight Array.join() insertion
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>'
].join("");
ready

Revisions

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