Weya jQuery d3 coffeecup

JavaScript performance comparison

Test case created by Varuna Jayasiri

Preparation code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://vpj.github.io/lib/coffeecup.js"></script>
<script src="http://vpj.github.io/lib/weya.js"></script>
<style>
.bar {
 display: inline-block;
 width: 5px;
 margin-left: 1px;
 background: black;
}
.bar-chart {
 margin-top: 2px;
}
</style>

<div id="container"></div>
      
<script>
Benchmark.prototype.setup = function() {
  onClick = function(e) {
    return alert('clicked!');
  };
  
  template = coffeecup.compile(function() {
    return div(".bar-chart", function() {
      var d, _i, _len, _ref, _results;
      _ref = this.data;
      _results = [];
      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
        d = _ref[_i];
        _results.push(div(".bar", {
          style: "height: " + d + "px"
        }, ""));
      }
      return _results;
    });
  });
  
  generateData = function() {
    var i, _i, _results;
    _results = [];
    for (i = _i = 0; _i < 25; i = ++_i) {
      _results.push(parseInt(Math.random() * 25));
    }
    return _results;
  };
  
  $("#container").html("");

};
</script>

Preparation code output

<style> .bar { display: inline-block; width: 5px; margin-left: 1px; background: black; } .bar-chart { margin-top: 2px; } </style> <div id="container"></div>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
jQuery
var bar, chart, container, d, _i, _len, _ref, _results;
container = $('#container');
chart = $('<div></div>');
chart.addClass("bar-chart");
container.append(chart);
_ref = generateData();
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
  d = _ref[_i];
  bar = $('<div></div>');
  bar.addClass("bar");
  bar.css({
    height: "" + d + "px"
  });
  _results.push(chart.append(bar));
}
return _results;
pending…
Coffeecup
var chart;
chart = $(template({
  data: generateData()
}));
chart.find(".bar").click(onClick);
return $("#container").append(chart);
pending…
Weya
var container;
container = document.getElementById('container');
return Weya(container, function() {
  return this.div(".bar-chart", function() {
    var d, _i, _len, _ref, _results;
    _ref = generateData();
    _results = [];
    for (_i = 0, _len = _ref.length; _i < _len; _i++) {
      d = _ref[_i];
      _results.push(this.div(".bar", {
        style: {
          height: "" + d + "px"
        },
        on: {
          click: onClick
        }
      }));
    }
    return _results;
  });
});
pending…
d3
var chart, container;
container = d3.select('#container');
chart = container.append('div').attr('class', 'bar-chart');
return chart.selectAll('div.bar').data(generateData()).enter().append('div').attr('class', 'bar').style('height', function(d) {
  return "" + d + "px";
}).on('click', onClick);
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.

0 Comments