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>