thinDOM vs jQuery vs CREL

JavaScript performance comparison

Test case created by Luis and last updated

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" style="display:none;"></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.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 CreateCaptionjQuery172(caption) {
    var $ = jQ172;
    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 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 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() {
    $("#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(CreateCaptionjQuery(CreateRandomCaption()));
pending…
jQuery 1.7.2
container.appendChild(CreateCaptionjQuery172(CreateRandomCaption()));
pending…
ThinDOM
container.appendChild(CreateCaptionThinDOM(CreateRandomCaption()));
pending…
CREL
container.appendChild(CreateCaptionCREL(CreateRandomCaption()));
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:

3 comments

Josh commented :

Try swapping out jquery 1.9.1 for 1.7.2... 1.7.2 is much faster.

Luis (revision owner) commented :

I am gonna modify this test to point to specific commits of CREL and ThinDOM. That way newer versions of said code wont break the tests.

Luis (revision owner) commented :

Added jQuery 1.7.2 without replacing 1.9.1

Add a comment