diff options
Diffstat (limited to 'bench')
-rw-r--r-- | bench/runner.html | 5 | ||||
-rw-r--r-- | bench/svg.bench.js | 13 | ||||
-rw-r--r-- | bench/tests/element-creation.js | 44 |
3 files changed, 54 insertions, 8 deletions
diff --git a/bench/runner.html b/bench/runner.html index 0ede94f..4c40208 100644 --- a/bench/runner.html +++ b/bench/runner.html @@ -7,15 +7,18 @@ font-family: 'Helvetica Light', Helvetica, sans-serif; font-weight: 300; } - #draw { + svg { width: 2px; height: 2px; overflow: hidden; + position: fixed; + right: 0; } </style> </head> <body> <div id="draw"></div> + <svg id="native" width="100" height="1000" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs"></svg> <script src="../dist/svg.js"></script> <script src="svg.bench.js"></script> <script src="tests/element-creation.js"></script> diff --git a/bench/svg.bench.js b/bench/svg.bench.js index 3f12f30..653d438 100644 --- a/bench/svg.bench.js +++ b/bench/svg.bench.js @@ -6,6 +6,7 @@ , _before: function() {} , _after: function() {} , draw: SVG('draw') + , raw: document.getElementById('native') // Add test , test: function(name, closure) { @@ -45,7 +46,10 @@ this.write( this._tests[i].name, ( new Date ).getTime() - s ) // run after - this._after(this._tests[i]) + this._after(this._tests[i]) + + // clear everything + this.clear() } } @@ -71,6 +75,13 @@ return pad } + + // Clear canvasses + , clear: function() { + while(this.raw.hasChildNodes()) + this.raw.removeChild(this.raw.lastChild) + this.draw.clear() + } } })();
\ No newline at end of file diff --git a/bench/tests/element-creation.js b/bench/tests/element-creation.js index 6e35a08..107c353 100644 --- a/bench/tests/element-creation.js +++ b/bench/tests/element-creation.js @@ -1,18 +1,50 @@ -;(function(bench) { - - bench.test('generate 10000 rects', function() { +(function(bench) { + var svgns = 'http://www.w3.org/2000/svg' + + bench.test('svg.js: generate 10000 rects', function() { for (var i = 0; i < 10000; i++) bench.draw.rect(100,100) }) - bench.test('generate 10000 rects with fill', function() { + 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('svg.js: generate 10000 rects with fill', function() { for (var i = 0; i < 10000; i++) bench.draw.rect(100,100).fill('#f06') }) - bench.test('generate 10000 rects with position and fill', function() { + 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('svg.js: 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') }) -})(SVG.bench);
\ No newline at end of file + 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) + } + }) + +})(SVG.bench)
\ No newline at end of file |