Optimize loop benchmark

kbrsh · Oct 29, 2017 · 5b305a6 · 5b305a6
1 parent dc36037
commit 5b305a6
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 50 deletions.
diff --git a/benchmarks/loop/index.html b/benchmarks/loop/index.html
@@ -3,21 +3,39 @@
   <head>
     <meta name="description" content="Loop | Moon" />
     <title>Loop | Moon</title>
-    <link href="https://cdn.rawgit.com/KingPixil/wing/master/dist/wing.css" rel="stylesheet" type="text/css" />
+    <link href="https://cdn.rawgit.com/kbrsh/wing/master/dist/wing.min.css" rel="stylesheet" type="text/css" />
+    <style>
+      .container {
+        margin-top: 50px;
+      }
+
+      button {
+        margin-right: 10px;
+      }
+
+      button:last-of-type {
+        margin-right: 0;
+      }
+
+      ul {
+        margin-top: 20px;
+      }
+    </style>
   </head>
-  <body class="container text-center">
-    <h1 style="font-weight:200;">Loop</h1>
-    <p>Check the console</p>
-    <div id="app">
-      <button m-on:click="add">Add 1000</button>
-      <button m-on:click="addLot">Add 10000</button>
-      <button m-on:click="reverse">Reverse</button>
-      <button m-on:click="swap">Swap</button>
-      <button m-on:click="remove">Remove</button>
-      <button m-on:click="clear">Clear</button>
-      <ul>
-        <li m-for="item in items">{{item}}</li>
-      </ul>
+  <body>
+    <div class="container">
+      <h1>Loop</h1>
+      <div id="app">
+        <button m-on:click="add">Add 1000</button>
+        <button m-on:click="addLot">Add 10000</button>
+        <button m-on:click="reverse">Reverse</button>
+        <button m-on:click="swap">Swap</button>
+        <button m-on:click="remove">Remove</button>
+        <button m-on:click="clear">Clear</button>
+        <ul>
+          <li m-for="item in items">{{item}}</li>
+        </ul>
+      </div>
     </div>
     <script src="../../dist/moon.js"></script>
     <script src="./scripts.js"></script>

diff --git a/benchmarks/loop/scripts.js b/benchmarks/loop/scripts.js
@@ -1,70 +1,62 @@
 var items = [];
+var total = 0;
+var currentBench = "";
 
 var add = function(num) {
-  for(var i = items.length ? items.length - 1 : 0, num = items.length - 1 + num; i < num; i++) {
-    items.push("item - " + i);
+  for(var i = 1; i <= num; i++) {
+    items.push("item -" + ((total++) + i));
   }
 }
 
-console.time('init');
-var app = new Moon({
+console.time("init");
+
+new Moon({
   root: "#app",
   data: {
     items: items
   },
   methods: {
     add: function() {
       add(1000);
-      console.time('add 1000');
-      this.set('items', items);
-      Moon.nextTick(function() {
-        console.timeEnd('add 1000');
-      });
+      console.time((currentBench = "add 1000"));
+      this.set("items", items);
     },
     addLot: function() {
       add(10000);
-      console.time('add 10000');
-      this.set('items', items);
-      Moon.nextTick(function() {
-        console.timeEnd('add 10000');
-      });
+      console.time((currentBench = "add 10000"));
+      this.set("items", items);
     },
     swap: function() {
       var i1 = Math.floor(Math.random()*items.length);
       var i2 = Math.floor(Math.random()*items.length);
       var tmp = items[i1];
       items[i1] = items[i2];
       items[i2] = tmp;
-      console.time('swap');
-      this.set('items', items);
-      Moon.nextTick(function() {
-        console.timeEnd('swap');
-      });
+      console.time((currentBench = "swap"));
+      this.set("items", items);
     },
     remove: function() {
       items.splice(Math.floor(Math.random()*items.length), 1);
-      console.time('remove');
-      this.set('items', items);
-      Moon.nextTick(function() {
-        console.timeEnd('remove');
-      });
+      console.time((currentBench = "remove"));
+      this.set("items", items);
     },
     clear: function() {
       items = [];
-      console.time('clear');
-      this.set('items', items);
-      Moon.nextTick(function() {
-        console.timeEnd('clear');
-      });
+      console.time((currentBench = "clear"));
+      this.set("items", items);
     },
     reverse: function() {
       items = items.reverse();
-      console.time('reverse');
-      this.set('items', items);
-      Moon.nextTick(function() {
-        console.timeEnd('reverse');
-      });
+      console.time((currentBench = "reverse"));
+      this.set("items", items);
+    }
+  },
+  hooks: {
+    init() {
+      console.timeEnd("init");
+    },
+    updated() {
+      console.timeEnd(currentBench);
     }
   }
-})
-console.timeEnd('init')
+});