thinDOM vs jQuery vs CREL

JavaScript performance comparison

Revision 8 of this test case created by Christopher Froehlich

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="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<script src="//raw.githubusercontent.com/somecallmechief/ThinDOM/master/dist/thinDOM.min.js"></script>
<script src="//code.jquery.com/jquery-2.1.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 CreateRandomCaptions() {
    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.random() * 200,
        'caption': caption_texts[roll]
      };
    }
    return out;
  }

  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 CreateCaptionInnerHTML(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>';
   
    var container = document.createElement("div");
    container.innerHTML = html;
    return container;
  }


  function CreateCaptionThinDOM(caption) {
    var points_plural = (caption.points === 1) ? '' : 's';
    var captionDOM = ThinDOM('div');
    captionDOM.attr('class', 'caption')
    var nu1 = ThinDOM('div');
    nu1.attr('class', 'votes');
    var nu2 = ThinDOM('a');
    nu2.attr({
      'class': 'up',
      'href': '#'
    })
    nu1.append(nu2);
    var nu3 = ThinDOM('a');
    nu3.attr({
      'class': 'down',
      'href': '#'
    });
    nu2.append(nu3);
    var nu4 = ThinDOM('div');
    nu4.attr('class', 'meta');
    nu3.append(nu4);
    var nu5 = ThinDOM('span');
    nu5.text(caption.author + ' - ');
    nu4.append(nu5);
    var nu6 = ThinDOM('span');
    nu6.text(caption.points + ' point' + points_plural);
    nu5.append(nu6);
    var nu7 = ThinDOM('p');
    nu7.text(caption.caption);
    nu6.append(nu7);
    captionDOM.append(nu1);
    return captionDOM.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;
  }
</script>
<script>
Benchmark.prototype.setup = function() {
    var container = $("#captions").empty().get(0);
};

Benchmark.prototype.teardown = function() {
    var container = $("#captions").empty().get(0);
};
</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 2.1.1
container.appendChild(CreateCaptionjQuery(CreateRandomCaptions()));
pending…
ThinDOM
container.appendChild(CreateCaptionThinDOM(CreateRandomCaptions()));
pending…
CREL
container.appendChild(CreateCaptionCREL(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