aboutsummaryrefslogtreecommitdiffstats
path: root/bench
diff options
context:
space:
mode:
Diffstat (limited to 'bench')
-rw-r--r--bench/runner.html12
-rw-r--r--bench/svg.bench.js63
-rw-r--r--bench/tests/10000-circles.js38
-rw-r--r--bench/tests/10000-rects.js (renamed from bench/tests/element-creation.js)35
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
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-22 17:46:33 +0000