From d59532cd05f9c414c48e5e19c1c4ac050e187e43 Mon Sep 17 00:00:00 2001 From: wout Date: Sat, 6 Aug 2016 09:31:44 +0200 Subject: Updated benchmarking system --- bench/runner.html | 12 +++++++- bench/svg.bench.js | 63 +++++++++++++++++++++-------------------- bench/tests/10000-circles.js | 38 +++++++++++++++++++++++++ bench/tests/10000-rects.js | 60 +++++++++++++++++++++++++++++++++++++++ bench/tests/element-creation.js | 59 -------------------------------------- 5 files changed, 141 insertions(+), 91 deletions(-) create mode 100644 bench/tests/10000-circles.js create mode 100644 bench/tests/10000-rects.js delete mode 100644 bench/tests/element-creation.js (limited to 'bench') 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; + } @@ -30,7 +39,8 @@ - + + 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 ' + name + ' in ' + ms + 'ms' + if (typeof ms === 'number') { + test.className = 'test' + test.innerHTML = '' + name + ' completed in ' + ms + 'ms' + } 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/10000-rects.js b/bench/tests/10000-rects.js new file mode 100644 index 0000000..d7b6303 --- /dev/null +++ b/bench/tests/10000-rects.js @@ -0,0 +1,60 @@ +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('using vanilla js', function() { + for (var i = 0; i < 10000; i++) { + var rect = document.createElementNS(SVG.ns, 'rect') + rect.setAttributeNS(null, 'height', 100) + rect.setAttributeNS(null, 'width', 100) + bench.raw.appendChild(rect) + } + }) + bench.test('using Snap.svg v0.41', function() { + for (var i = 0; i < 10000; i++) + bench.snap.rect(50, 50, 100, 100) + }) +}) + +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('using vanilla js', function() { + for (var i = 0; i < 10000; i++) { + 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('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.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('using vanilla js', function() { + for (var i = 0; i < 10000; i++) { + var rect = document.createElementNS(SVG.ns, 'rect') + rect.setAttributeNS(null, 'height', 100) + rect.setAttributeNS(null, 'width', 100) + rect.setAttributeNS(null, 'fill', '#f06') + rect.setAttributeNS(null, 'x', 50) + rect.setAttributeNS(null, 'y', 50) + bench.raw.appendChild(rect) + } + }) + 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') + }) +}) \ No newline at end of file diff --git a/bench/tests/element-creation.js b/bench/tests/element-creation.js deleted file mode 100644 index f0e4143..0000000 --- a/bench/tests/element-creation.js +++ /dev/null @@ -1,59 +0,0 @@ -(function(bench) { - var svgns = 'http://www.w3.org/2000/svg' - - bench.test('svg.js v2.3.4: generate 10000 rects', function() { - for (var i = 0; i < 10000; i++) - bench.draw.rect(100,100) - }) - bench.test('native: generate 10000 rects', function() { - for (var i = 0; i < 10000; i++) { - var rect = document.createElementNS(svgns, '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() { - 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() { - for (var i = 0; i < 10000; i++) - bench.draw.rect(100,100).fill('#f06') - }) - bench.test('native: generate 10000 rects with fill', function() { - for (var i = 0; i < 10000; i++) { - var rect = document.createElementNS(svgns, '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() { - 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() { - 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() { - for (var i = 0; i < 10000; i++) { - var rect = document.createElementNS(svgns, 'rect') - rect.setAttributeNS(null, 'height', 100) - rect.setAttributeNS(null, 'width', 100) - rect.setAttributeNS(null, 'fill', '#f06') - rect.setAttributeNS(null, 'x', 50) - rect.setAttributeNS(null, 'y', 50) - bench.raw.appendChild(rect) - } - }) - bench.test('Snap.svg v0.41: generate 10000 rects with fill and position', 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 -- cgit v1.2.3