flagrate.Grid performance

JavaScript performance comparison

Test case created by Flagrate

Preparation code

<link href="//flagrate.org/flagrate.min.css" rel="stylesheet">
<script src="//flagrate.org/flagrate.min.js"></script>

<script src="//ajax.googleapis.com/ajax/libs/prototype/1/prototype.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.pixely.jp/shared/js/lib/hyper/hypergrid.css">
<script type="text/javascript" src="http://cdn.pixely.jp/shared/js/lib/hyper/hypergrid.js"></script>

<div id="container">container</div>

<script>
window.container = document.getElementById('container');

window.cols = [
  {
    key      : 'id',
    label    : '#',
    width    : 20
  },
  {
    key      : 'name',
    label    : 'name'
  }
];

window.cols_hyper = [
  {
    key      : 'id',
    innerHTML: '#',
    width    : 20
  },
  {
    key      : 'name',
    innerHTML: 'name'
  }
];

window.rows = (function() {
  var rows = [];
 
  for (var i = 0; i < 50; i++) {
    rows.push({
      cell: {
        id  : { html: i.toString(10) },
        name: { html: i.toString(10) + '-san' }
      }
    });
  }
 
  return rows;
})();

window.rows_hyper = (function() {
  var rows = [];
 
  for (var i = 0; i < 50; i++) {
    rows.push({
      cell: {
        id  : { innerHTML: i.toString(10) },
        name: { innerHTML: i.toString(10) + '-san' }
      }
    });
  }
 
  return rows;
})();
</script>
<script>
Benchmark.prototype.teardown = function() {
    container.innerHTML = '';
};
</script>

Preparation code output

container

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
flagrate.Grid
new flagrate.Grid({
  cols: Object.clone(cols),
  rows: Object.clone(rows)
}).insertTo(container);
pending…
Hypergrid
new Hypergrid({
  colModel: Object.clone(cols_hyper),
  rows    : Object.clone(rows_hyper)
}).render(container);
pending…
flagrate.Grid#push(row)
var grid = new flagrate.Grid({
  cols: Object.clone(cols),
  rows: []
}).insertTo(container);

for (var i = 0, l = rows.length; i < l; i++) {
  grid.push(Object.clone(rows[i]));
}
pending…
Hypergrid#push(row)
var grid = new Hypergrid({
  colModel: Object.clone(cols_hyper),
  rows: []
}).render(container);

for (var i = 0, l = rows_hyper.length; i < l; i++) {
  grid.push(Object.clone(rows_hyper[i]));
}
pending…
flagrate.Grid#push(rows)
var grid = new flagrate.Grid({
  cols: Object.clone(cols),
  rows: []
}).insertTo(container);

grid.push(Object.clone(rows));
pending…
Hypergrid#push(rows)
var grid = new Hypergrid({
  colModel: Object.clone(cols_hyper),
  rows: []
}).render(container);

grid.push(Object.clone(rows_hyper));
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