Add benchmark

10 years ago · 7696029b2f
parent e3efdcb60d
commit 7696029b2f
2 changed files with 70 additions and 0 deletions
--- a/perf/benchmarks.js
+++ b/perf/benchmarks.js
@ -0,0 +1,58 @@
 var Benchmark = require('benchmark');
 var a = require('../snabbdom.js');
 var b = require('../oldsnabbdom.js');
 global.a = a;
 global.b = b;
 var suite = new Benchmark.Suite();
 a.spanNum = function spanNum(n) {
  return a.h('span', {key: n}, n.toString());
 };
 b.spanNum = function spanNum(n) {
  return b.h('span', {key: n}, n.toString());
 };
 var elms = global.elms = 10;
 var arr = global.arr = [];
 for (var n = 0; n < elms; ++n) { arr[n] = n; }
 document.addEventListener('DOMContentLoaded', function() {
  var elm = global.elm = document.getElementById('container');
  // add tests
  suite.add('a/ insert first', {
    setup: function() {
      var vnode1 = a.h('div', arr.map(a.spanNum));
      var vnode2 = a.h('div', ['new'].concat(arr).map(a.spanNum));
    },
    fn: function() {
      var emptyNode = a.emptyNodeAt(elm);
      a.patch(emptyNode, vnode1);
      a.patch(vnode1, vnode2);
      a.patch(vnode2, a.emptyNode);
    },
  })
  .add('b/ insert first', {
    setup: function() {
      var vnode1 = b.h('div', arr.map(b.spanNum));
      var vnode2 = b.h('div', ['new'].concat(arr).map(b.spanNum));
    },
    fn: function() {
      var emptyNode = b.emptyNodeAt(elm);
      b.patch(emptyNode, vnode1);
      b.patch(vnode1, vnode2);
      b.patch(vnode2, b.emptyNode);
    },
  })
  // add listeners
  .on('cycle', function(event) {
    console.log(String(event.target));
  })
  .on('complete', function() {
    console.log('Fastest is ' + this.filter('fastest').pluck('name'));
  })
  // run async
  .run({async: true});
 });
--- a/perf/index.html
+++ b/perf/index.html
@ -0,0 +1,12 @@
 <!DOCTYPE html>
 <html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Snabbdom benchmarks</title>
    <script type="text/javascript" src="build.js"></script>
  </head>
  <body>
    <p>See console</p>
    <div id="container"></div>
  </body>
 </html>