Updated benchmarking system

author: wout <wout@impinc.co.uk> 2016-08-06 09:31:44 +0200
committer: wout <wout@impinc.co.uk> 2016-08-06 09:31:44 +0200
commit: d59532cd05f9c414c48e5e19c1c4ac050e187e43 (patch)
tree: 883b0f99308473bb5496472ba6e7bef0a08144e7
parent: 0e23fcd9ef56f369763505dbb22c3f5ab23a0b17 (diff)
download: svg.js-d59532cd05f9c414c48e5e19c1c4ac050e187e43.tar.gz
svg.js-d59532cd05f9c414c48e5e19c1c4ac050e187e43.zip
4 files changed, 99 insertions, 49 deletions
diff --git a/bench/runner.html b/bench/runner.html
index c24cc8b..9fdc898 100644
--- a/bench/runner.html
+++ b/bench/runner.html
@@ -22,6 +22,15 @@
     span.ms {
       color: #FF0066;
     }
+    h1 {
+      font-size: 1.2em;
+    }
+    .test {
+      text-indent: 1em;
+    }
+    .skipped {
+      color: #FBCB72;
+    }
   </style>
 </head>
 <body>
@@ -30,7 +39,8 @@
   <script src="../dist/svg.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg.js"></script>
   <script src="svg.bench.js"></script>
-  <script src="tests/element-creation.js"></script>
+  <script src="tests/10000-rects.js"></script>
+  <script src="tests/10000-circles.js"></script>
   <script>
     SVG.bench.run()
   </script>
diff --git a/bench/svg.bench.js b/bench/svg.bench.js
index 7f1aa1e..165f87a 100644
--- a/bench/svg.bench.js
+++ b/bench/svg.bench.js
@@ -2,74 +2,75 @@
 
   SVG.bench = {
     // Initalize test store
-    _tests:  []
+    _chain:  []
   , _before: function() {}
   , _after:  function() {}
   , draw:    SVG('draw')
   , snap:    Snap(100, 100)
   , raw:     document.getElementById('native')
 
-    // Add test
-  , test: function(name, closure) {
-      this._tests.push({
+    // Add descriptor
+  , describe: function(name, closure) {
+      this._chain.push({
         name: name
-      , test: closure
+      , run:  closure
       })
 
       return this
     }
 
-    // Set before runner
-  , before: function(closure) {
-      this._before = closure
-
-      return this
+    // Add test
+  , test: function(name, run) {
+      // run test
+      var start = ( new Date ).getTime()
+      run()
+      this.write( name, ( new Date ).getTime() - start )
+
+      // clear everything
+      this.clear()
     }
 
-    // Set after runner
-  , after: function(closure) {
-      this._after = closure
-
-      return this
+    // Skip test
+  , skip: function(name, run) {
+      this.write( name, false )
     }
 
     // Run tests
   , run: function() {
       this.pad(true)
       
-      for (var s, i = 0, il = this._tests.length; i < il; i++) {
-        // run before
-        this._before(this._tests[i])
-
-        // run test
-        s = ( new Date ).getTime()
-        this._tests[i].test()
-        this.write( this._tests[i].name, ( new Date ).getTime() - s )
+      for (var h, i = 0, il = this._chain.length; i < il; i++) {
+        var h = document.createElement('h1')
+        h.innerHTML = this._chain[i].name
 
-        // run after
-        this._after(this._tests[i])
+        this.pad().appendChild(h)
 
-        // clear everything
-        this.clear()
+        this._chain[i].run(this)
       }
     }
 
     // Write result
   , write: function(name, ms) {
       var test = document.createElement('div')
-      test.className = 'test'
-      test.innerHTML = 'Completed <span class="name">' + name + '</span> in <span class="ms">' + ms + 'ms</span>'
 
+      if (typeof ms === 'number') {
+        test.className = 'test'
+        test.innerHTML = '<span class="name">' + name + '</span> completed in <span class="ms">' + ms + 'ms</span>'
+      } else {
+        test.className = 'test skipped'
+        test.innerHTML = name + ' (skipped)'
+      }
+      
       this.pad().appendChild(test)
 
       return this
     }
 
     // Reference writable element
-  , pad: function(regenerate) {
+  , pad: function() {
       var pad = document.getElementById('pad')
 
-      if (regenerate || !pad) {
+      if (!pad) {
         pad = document.createElement('div')
         document.getElementsByTagName('body')[0].appendChild(pad)
       }
diff --git a/bench/tests/10000-circles.js b/bench/tests/10000-circles.js
new file mode 100644
index 0000000..467c26a
--- /dev/null
+++ b/bench/tests/10000-circles.js
@@ -0,0 +1,38 @@
+SVG.bench.describe('Generate 10000 circles', function(bench) {
+  bench.skip('using svg.js v2.3.4', function() {
+    for (var i = 0; i < 10000; i++)
+      bench.draw.circle(100,100)
+  })
+  bench.skip('using vanilla js', function() {
+    for (var i = 0; i < 10000; i++) {
+      var circle = document.createElementNS(SVG.ns, 'circle')
+      circle.setAttributeNS(null, 'rx', 50)
+      circle.setAttributeNS(null, 'ry', 50)
+      bench.raw.appendChild(circle)
+    }
+  })
+  bench.skip('using Snap.svg v0.41', function() {
+    for (var i = 0; i < 10000; i++)
+      bench.snap.circle(50, 50, 100, 100)
+  })
+})
+
+SVG.bench.describe('Generate 10000 circles with fill', function(bench) {
+  bench.test('using svg.js v2.3.4', function() {
+    for (var i = 0; i < 10000; i++)
+      bench.draw.circle(100,100).fill('#f06')
+  })
+  bench.test('using vanilla js', function() {
+    for (var i = 0; i < 10000; i++) {
+      var circle = document.createElementNS(SVG.ns, 'circle')
+      circle.setAttributeNS(null, 'rx', 50)
+      circle.setAttributeNS(null, 'ry', 50)
+      circle.setAttributeNS(null, 'fill', '#f06')
+      bench.raw.appendChild(circle)
+    }
+  })
+  bench.test('using Snap.svg v0.41', function() {
+    for (var i = 0; i < 10000; i++)
+      bench.snap.circle(50, 50, 100, 100).attr('fill', '#f06')
+  })
+})
+\ No newline at end of file
diff --git a/bench/tests/element-creation.js b/bench/tests/10000-rects.js
index f0e4143..d7b6303 100644
--- a/bench/tests/element-creation.js
+++ b/bench/tests/10000-rects.js
@@ -1,48 +1,50 @@
-(function(bench) {
-  var svgns = 'http://www.w3.org/2000/svg'
-
-  bench.test('svg.js v2.3.4: generate 10000 rects', function() {
+SVG.bench.describe('Generate 10000 rects', function(bench) {
+  bench.test('using svg.js v2.3.4', function() {
     for (var i = 0; i < 10000; i++)
       bench.draw.rect(100,100)
   })
-  bench.test('native: generate 10000 rects', function() {
+  bench.test('using vanilla js', function() {
     for (var i = 0; i < 10000; i++) {
-      var rect = document.createElementNS(svgns, 'rect')
+      var rect = document.createElementNS(SVG.ns, 'rect')
       rect.setAttributeNS(null, 'height', 100)
       rect.setAttributeNS(null, 'width', 100)
       bench.raw.appendChild(rect)
     }
   })
-  bench.test('Snap.svg v0.41: generate 10000 rects', function() {
+  bench.test('using Snap.svg v0.41', function() {
     for (var i = 0; i < 10000; i++)
       bench.snap.rect(50, 50, 100, 100)
   })
+})
 
-  bench.test('svg.js v2.3.4: generate 10000 rects with fill', function() {
+SVG.bench.describe('Generate 10000 rects with fill', function(bench) {
+  bench.test('using svg.js v2.3.4', function() {
     for (var i = 0; i < 10000; i++)
       bench.draw.rect(100,100).fill('#f06')
   })
-  bench.test('native: generate 10000 rects with fill', function() {
+  bench.test('using vanilla js', function() {
     for (var i = 0; i < 10000; i++) {
-      var rect = document.createElementNS(svgns, 'rect')
+      var rect = document.createElementNS(SVG.ns, 'rect')
       rect.setAttributeNS(null, 'height', 100)
       rect.setAttributeNS(null, 'width', 100)
       rect.setAttributeNS(null, 'fill', '#f06')
       bench.raw.appendChild(rect)
     }
   })
-  bench.test('Snap.svg v0.41: generate 10000 rects with fill', function() {
+  bench.test('using Snap.svg v0.41', function() {
     for (var i = 0; i < 10000; i++)
       bench.snap.rect(50, 50, 100, 100).attr('fill', '#f06')
   })
+})
 
-  bench.test('svg.js v2.3.4: generate 10000 rects with position and fill', function() {
+SVG.bench.describe('Generate 10000 rects with position and fill', function(bench) {
+  bench.test('using svg.js v2.3.4', function() {
     for (var i = 0; i < 10000; i++)
       bench.draw.rect(100,100).move(50,50).fill('#f06')
   })
-  bench.test('native: generate 10000 rects with position and fill', function() {
+  bench.test('using vanilla js', function() {
     for (var i = 0; i < 10000; i++) {
-      var rect = document.createElementNS(svgns, 'rect')
+      var rect = document.createElementNS(SVG.ns, 'rect')
       rect.setAttributeNS(null, 'height', 100)
       rect.setAttributeNS(null, 'width', 100)
       rect.setAttributeNS(null, 'fill', '#f06')
@@ -51,9 +53,8 @@
       bench.raw.appendChild(rect)
     }
   })
-  bench.test('Snap.svg v0.41: generate 10000 rects with fill and position', function() {
+  bench.test('using Snap.svg v0.41', function() {
     for (var i = 0; i < 10000; i++)
       bench.snap.rect(50, 50, 100, 100).attr('fill', '#f06')
   })
-
-})(SVG.bench)
-\ No newline at end of file
+})
+\ No newline at end of file
author	wout <wout@impinc.co.uk>	2016-08-06 09:31:44 +0200
committer	wout <wout@impinc.co.uk>	2016-08-06 09:31:44 +0200
commit	d59532cd05f9c414c48e5e19c1c4ac050e187e43 (patch)
tree	883b0f99308473bb5496472ba6e7bef0a08144e7
parent	0e23fcd9ef56f369763505dbb22c3f5ab23a0b17 (diff)
download	svg.js-d59532cd05f9c414c48e5e19c1c4ac050e187e43.tar.gz svg.js-d59532cd05f9c414c48e5e19c1c4ac050e187e43.zip