thinDOM vs jQuery vs CREL

JavaScript performance comparison

Revision 4 of this test case created by Brian Peiris

Info

Testing ThinDOM vs CREL vs jQuery

See: http://imgur.com/blog/2013/05/21/tech-tuesday-jquery-dom-performance/

Preparation code

<script src="//rawgithub.com/KoryNunn/crel/8dbda04b129fc0aec01a2a080d1cab26816e11c1/crel.js">
</script>
<script src="//rawgithub.com/jacobgreenleaf/ThinDOM/d10b6fb829154359e688731ce0c1126bd2f1164c/ThinDOM.js">
</script>
<script src="//code.jquery.com/jquery-1.7.2.min.js"></script>
<script>var jQ172 = $.noConflict();</script>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<div id="captions"></div>
<script>
  var caption_texts = ['Lorem ipsum', 'The narwhal bacons at midnight', 'Has Anyone Really Been Far Even as Decided to Use Even Go Want to do Look More Like?'];

  function CreateRandomCaption() {
    var roll = Math.round(Math.random() * (caption_texts.length)),
        out;
    if (roll === caption_texts.length) {
      out = {
        'author': 'sage',
        'points': 'sage',
        'caption': 'sage goes in all fields'
      };
    } else {
      out = {
        'author': 'Arthur',
        'points': Math.floor(Math.random() * 2 + 1),
        'caption': caption_texts[roll]
      };
    }
    return out;
  }

  function CreateRandomCaptions(count) {
    var captions = []
    for (var i = 0; i < (count || 500); i++) {
      captions.push(CreateRandomCaption());
    }
    return captions;
  }

  function CreateCaptionsInnerHTML(captions) {
    var htmls = captions.map(function (caption) {
      var points_plural = (caption['points'] === 1) ? '' : 's';
      var html = '<div class="caption">';
      html += '<div class="votes"><a class="up" href="#"></a><a class="down" href="#"></a></div><div class="meta"><span>' + caption['author'] + ' - </span><span>'+ caption['points'] +' point' + points_plural + '</span></div><p>'+caption['caption']+'</p>';
      html += '</div>';
      return html;
    });
    var container = document.createElement("div");
    container.innerHTML = htmls.join("");
    return container;
  }

  function CreateCaptionjQuery(caption) {
    var points_plural = (caption.points === 1) ? '' : 's';
    var captionDOM = $("<div />").attr('class', 'caption').append($("<div />").attr('class', 'votes').append($('<a />').attr({
      'class': 'up',
      'href': '#'
    })).append($('<a />').attr({
      'class': 'down',
      'href': '#'
    }))).append($("<div />").attr('class', 'meta').append($("<span />").text(caption.author + ' - ')).append($("<span />").text(caption.points + ' point' + points_plural))).append($("<p />").text(caption.caption)).get(0);
    return captionDOM;
  }

  function CreateCaptionsjQuery(captions) {
    var captionDOMs = captions.map(CreateCaptionjQuery);
    var container = $('<div />').append(captionDOMs);
    return container.get(0);
  }

  function CreateCaptionThinDOM(caption) {
    var points_plural = (caption.points === 1) ? '' : 's';
    var captionDOM = new ThinDOM('div').attr('class', 'caption').append(new ThinDOM('div').attr('class', 'votes').append(new ThinDOM('a').attr({
      'class': 'up',
      'href': '#'
    })).append(new ThinDOM('a').attr({
      'class': 'down',
      'href': '#'
    }))).append(new ThinDOM('div').attr('class', 'meta').append(new ThinDOM('span').html(caption.author + ' - ')).append(new ThinDOM('span').html(caption.points + ' point' + points_plural))).append(new ThinDOM('p').html(caption.caption)).get();
    return captionDOM;
  }

  function CreateCaptionsThinDOM(captions) {
    var captionDOMs = captions.map(CreateCaptionThinDOM);
    var container = new ThinDOM('div').append($(captionDOMs));
    return container.get();
  }

  function CreateCaptionCREL(caption) {
    var points_plural = (caption.points === 1) ? '' : 's';
    var captionDOM = crel('div', {
      "class": "caption"
    }, crel('div', {
      "class": "votes"
    }, crel('a', {
      "class": "up",
      href: '#'
    }), crel('a', {
      "class": "down",
      href: "#"
    })), crel('div', {
      "class": "meta"
    }, crel('span', {}, caption.author + ' - '), crel('span', {}, caption.points + ' point' + points_plural)), crel('p', {}, caption.caption));
    return captionDOM;
  }

  function CreateCaptionsCREL(captions) {
    var captionDOMs = captions.map(CreateCaptionThinDOM);
    var container = crel.apply(['div'].concat(captionDOMs));
    return container;
  }

  // Run each test for debugging purposes:
  $('#captions').append(CreateCaptionsCREL(CreateRandomCaptions(2)));
  $('#captions').append(CreateCaptionsInnerHTML(CreateRandomCaptions(2)));
  $('#captions').append(CreateCaptionsjQuery(CreateRandomCaptions(2)));
  $('#captions').append(CreateCaptionsThinDOM(CreateRandomCaptions(2)));

</script>
 
<script>
Benchmark.prototype.setup = function() {
    var container = $("#captions").empty().get(0);
};

Benchmark.prototype.teardown = function() {
    $("#captions").empty();
};
</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
jQuery 1.9.1
container.appendChild(CreateCaptionsjQuery(CreateRandomCaptions()));
pending…
ThinDOM
container.appendChild(CreateCaptionsThinDOM(CreateRandomCaptions()));
pending…
CREL
container.appendChild(CreateCaptionsCREL(CreateRandomCaptions()));
pending…
innerHTML
container.appendChild(CreateCaptionsInnerHTML(CreateRandomCaptions()));
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