tweak bench

benchmarks/reorder-list/index.html

@@ -6,32 +6,32 @@
 }
 </style>
 
-<script type="x/template" id="t">
+<script type="text/x-template" id="t">
-<div>
+  <div>
-  <p>Used {{time}}ms.</p>
+    <p>{{ action }} took {{time}}ms.</p>
-  <button @click="shuffle">shuffle</button>
+    <button @click="shuffle">shuffle</button>
-  <button @click="add">add</button>
+    <button @click="add">add</button>
-  <table class="table table-hover table-striped test-data">
+    <table class="table table-hover table-striped test-data">
-    <row v-for="item in items" track-by="id"
+      <row v-for="item in items" track-by="id"
-      :class="{ danger: item.id === selected }"
+        :class="{ danger: item.id === selected }"
-      :item="item"
+        :item="item"
-      @select="select(item)"
+        @select="select(item)"
-      @remove="remove(item)">
+        @remove="remove(item)">
-    </row>
+      </row>
-  </table>
+    </table>
-</div>
+  </div>
 </script>
 
-<script type="x/template" id="row">
+<script type="text/x-template" id="row">
-<tr>
+  <tr>
-  <td class="col-md-1">{{item.id}}</td>
+    <td class="col-md-1">{{item.id}}</td>
-  <td class="col-md-4">
+    <td class="col-md-4">
-      <a @click="$emit('select')">{{item.label}}</a>
+        <a @click="$emit('select')">{{item.label}}</a>
-  </td>
+    </td>
-  <td class="col-md-1">
+    <td class="col-md-1">
-    <button @click="$emit('remove')">remove</button>
+      <button @click="$emit('remove')">remove</button>
-  </td>
+    </td>
-</tr>
+  </tr>
 </script>
 
 <h1>1000 Components</h1>
@@ -53,23 +53,24 @@ var vm = new Vue({
   template: '#t',
   data: {
     time: 0,
+    action: 'Render',
     items: items,
     selected: null
   },
   methods: {
-    shuffle: wrap(function () {
+    shuffle: monitor('shuffle', function () {
       this.items = _.shuffle(this.items)
     }),
-    add: wrap(function () {
+    add: monitor('add', function () {
       this.items.push({
         id: this.items.length,
         label: String(Math.random()).slice(0, 5)
       })
     }),
-    select: wrap(function (item) {
+    select: monitor('select', function (item) {
       this.selected = item.id
     }),
-    remove: wrap(function (item) {
+    remove: monitor('remove', function (item) {
       this.items.$remove(item)
     })
   },
@@ -84,11 +85,12 @@ setTimeout(function () {
   vm.time = window.performance.now() - s
 }, 0)
 
-function wrap (fn) {
+function monitor (action, fn) {
   return function () {
     var s = window.performance.now()
     fn.apply(this, arguments)
     Vue.nextTick(function () {
+      vm.action = action
       vm.time = window.performance.now() - s
     })
   }