]> 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: ef0ceb2)
Added native testcases for benchmarking system
authorwout <wout@impinc.co.uk>
Thu, 4 Aug 2016 16:33:26 +0000 (18:33 +0200)
committerwout <wout@impinc.co.uk>
Thu, 4 Aug 2016 16:33:26 +0000 (18:33 +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 0ede94fb8bfbfc9eec4e553e5aa5d248a962389c..4c4020855eabc260b41077b410ee06eb88954e59 100644 (file)
--- 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 3f12f3031ba617a3aa1e97a0cdc827ae70aa30f9..653d438f9eb5127595714ee1c35835dccf302bd4 100644 (file)
--- 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 6e35a08f4ffe5506296db51e89ed5c2b150d3297..107c3530bc0d57851038387c961cd05df70ee61b 100644 (file)
--- 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
The lightweight library for manipulating and animating SVG: https://github.com/svgdotjs/svg.js