]> source.dussan.org Git - svg.js.git/commitdiff
projects / svg.js.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 16575bd)
Added Snap.svg to benchmarking system
authorwout <wout@impinc.co.uk>
Thu, 4 Aug 2016 19:19:53 +0000 (21:19 +0200)
committerwout <wout@impinc.co.uk>
Thu, 4 Aug 2016 19:19:53 +0000 (21:19 +0200)
bench/runner.html patch | blob | history
bench/svg.bench.js patch | blob | history
bench/tests/element-creation.js patch | blob | history

diff --git a/bench/runner.html b/bench/runner.html
index 0e005f14dee8fede6bcf947d34a08ba3eb613862..c24cc8b1d0cb183f0c75609380bb93efa14d2ec4 100644 (file)
--- a/bench/runner.html
+++ b/bench/runner.html
@@ -26,8 +26,9 @@
 </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>
+  <svg id="native" width="100" height="100" 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="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>
diff --git a/bench/svg.bench.js b/bench/svg.bench.js
index 0cf46cc3cda7186fbb6232d364a97dcc9fec1284..7f1aa1e3afc5db886cbe160516c3f6ee77999cc3 100644 (file)
--- a/bench/svg.bench.js
+++ b/bench/svg.bench.js
@@ -6,6 +6,7 @@
   , _before: function() {}
   , _after:  function() {}
   , draw:    SVG('draw')
+  , snap:    Snap(100, 100)
   , raw:     document.getElementById('native')
 
     // Add test
@@ -57,7 +58,7 @@
   , write: function(name, ms) {
       var test = document.createElement('div')
       test.className = 'test'
-      test.innerHTML = 'Compleded <span class="name">' + name + '</span> in <span class="ms">' + ms + 'ms</span>'
+      test.innerHTML = 'Completed <span class="name">' + name + '</span> in <span class="ms">' + ms + 'ms</span>'
 
       this.pad().appendChild(test)
 
@@ -81,6 +82,7 @@
       while(this.raw.hasChildNodes())
         this.raw.removeChild(this.raw.lastChild)
       this.draw.clear()
+      this.snap.clear()
     }
   }
 
diff --git a/bench/tests/element-creation.js b/bench/tests/element-creation.js
index 107c3530bc0d57851038387c961cd05df70ee61b..f0e4143c1365070047b5b868f499a72d150aaae9 100644 (file)
--- a/bench/tests/element-creation.js
+++ b/bench/tests/element-creation.js
@@ -1,11 +1,10 @@
 (function(bench) {
   var svgns = 'http://www.w3.org/2000/svg'
 
-  bench.test('svg.js: generate 10000 rects', function() {
+  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')
@@ -14,12 +13,15 @@
       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: generate 10000 rects with fill', function() {
+  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')
@@ -29,12 +31,15 @@
       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: generate 10000 rects with position and fill', function() {
+  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')
@@ -46,5 +51,9 @@
       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
The lightweight library for manipulating and animating SVG: https://github.com/svgdotjs/svg.js