improve svg dots benchmark

epicmaxco · Apr 18, 2016 · 4fecfe2 · 4fecfe2
1 parent bf39f19
commit 4fecfe2
Showing 1 changed file with 47 additions and 32 deletions.
diff --git a/benchmarks/svg/index.html b/benchmarks/svg/index.html
@@ -2,54 +2,70 @@
 <html lang="en">
 <head>
   <title>vue.js version</title>
-    <script src="https://cdn.jsdelivr.net/stats.js/r11/stats.min.js"></script>
-    <script src="../../dist/vue.js"></script>
+  <script src="https://cdn.jsdelivr.net/stats.js/r11/stats.min.js"></script>
+  <script src="../../dist/vue.js"></script>
   <style>
-html, body {
-  height: 100%;
-  width: 100%;
-  padding: 0;
-  margin: 0;
-}
-svg {
-  width: 800px;
-  height: 600px;
-}
+  html, body {
+    height: 100%;
+    width: 100%;
+    padding: 0;
+    margin: 0;
+  }
+  svg {
+    width: 800px;
+    height: 600px;
+  }
   </style>
 </head>
 <body>
- <div id="app">
- <svg>
-    <circle  v-for='point in points' :cx='point.x' :cy='point.y' r='2px' fill='#FC309D'></circle>
- </svg>
-</div>
+  <h1>Animating 1000 SVG dots</h1>
+  <div id="app">
+    <p>
+      <button @click="toggleOptimization">
+        {{ optimized ? 'disable' : 'enable' }} optimization (Object.freeze)
+      </button>
+    </p>
+    <svg>
+      <circle  v-for='point in model.points' :cx='point.x' :cy='point.y' r='2px' fill='#FC309D'></circle>
+    </svg>
+  </div>
 <script type="text/javascript" charset="utf-8">
-var stats = new Stats();
-stats.setMode(0); // 0: fps, 1: ms, 2: mb
-
-// align top-left
-stats.domElement.style.position = 'absolute';
-stats.domElement.style.left = '0px';
-stats.domElement.style.top = '0px';
-
-document.body.appendChild( stats.domElement );
+var stats = new Stats()
+stats.setMode(0)
+stats.domElement.style.position = 'absolute'
+stats.domElement.style.right = '0px'
+stats.domElement.style.top = '0px'
+document.body.appendChild(stats.domElement)
 
 var WIDTH = 800
 var HEIGHT = 600
-var model = createModel(1000);
 
 new Vue({
   el: '#app',
-  data: model,
+  data: {
+    model: createModel(1000),
+    optimized: false
+  },
   created: function () {
     var self = this
-    self.raf = window.requestAnimationFrame(render)
+    requestAnimationFrame(render)
     stats.begin()
     function render () {
       stats.end()
       stats.begin()
-      self.raf = window.requestAnimationFrame(render)
-      self.step()
+      requestAnimationFrame(render)
+      self.model.step()
+      if (self.optimized) {
+        self.$forceUpdate()
+      }
+    }
+  },
+  methods: {
+    toggleOptimization: function () {
+      this.model = this.optimized
+        ? createModel(1000)
+        : Object.freeze(createModel(1000))
+      this.optimized = !this.optimized
     }
   }
 });
@@ -72,7 +88,6 @@
 
   function step () {
     points.forEach(move)
-    // move(points[0])
   }
 
   function move (p) {