make reorder benchmark valid html

9 years ago · caf2828c62
1 changed files with 101 additions and 92 deletions
--- a/benchmarks/reorder-list/index.html
+++ b/benchmarks/reorder-list/index.html
@ -1,102 +1,111 @@
-<script src="https://cdn.jsdelivr.net/lodash/4.10.0/lodash.min.js"></script>
-<script src="../../dist/vue.min.js"></script>
-<style>
-.danger {
-  background-color: red;
-}
-</style>
-
-<script type="text/x-template" id="t">
-  <div>
-    <h1>{{ total }} Components</h1>
-    <p>{{ action }} took {{time}}ms.</p>
-    <button @click="shuffle">shuffle</button>
-    <button @click="add">add</button>
-    <table class="table table-hover table-striped test-data">
-      <row v-for="item in items" track-by="id"
-        :class="{ danger: item.id === selected }"
-        :item="item"
-        @select="select(item)"
-        @remove="remove(item)">
-      </row>
-    </table>
-  </div>
-</script>
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Vue benchmark</title>
+  </head>
+  <body>
+    <script src="https://cdn.jsdelivr.net/lodash/4.10.0/lodash.min.js"></script>
+    <script src="../../dist/vue.min.js"></script>
+    <style>
+    .danger {
+      background-color: red;
+    }
+    </style>

-<script type="text/x-template" id="row">
-  <tr>
-    <td class="col-md-1">{{item.id}}</td>
-    <td class="col-md-4">
-        <a @click="$emit('select')">{{item.label}}</a>
-    </td>
-    <td class="col-md-1">
-      <button @click="$emit('remove')">remove</button>
-    </td>
-  </tr>
-</script>
+    <script type="text/x-template" id="t">
+      <div>
+        <h1>{{ total }} Components</h1>
+        <p>{{ action }} took {{time}}ms.</p>
+        <button @click="shuffle">shuffle</button>
+        <button @click="add">add</button>
+        <table class="table table-hover table-striped test-data">
+          <row v-for="item in items" track-by="id"
+            :class="{ danger: item.id === selected }"
+            :item="item"
+            @select="select(item)"
+            @remove="remove(item)">
+          </row>
+        </table>
+      </div>
+    </script>

-<div id="el">
-</div>
+    <script type="text/x-template" id="row">
+      <tr>
+        <td class="col-md-1">{{item.id}}</td>
+        <td class="col-md-4">
+            <a @click="$emit('select')">{{item.label}}</a>
+        </td>
+        <td class="col-md-1">
+          <button @click="$emit('remove')">remove</button>
+        </td>
+      </tr>
+    </script>

-<script>
-var total = 1000
-var items = []
-for (var i = 0; i < total; i++) {
-  items.push({
-    id: i,
-    label: String(Math.random()).slice(0, 5)
-  })
-}
+    <div id="el">
+    </div>

-var s = window.performance.now()
-console.profile('render')
-var vm = new Vue({
-  el: '#el',
-  template: '#t',
-  data: {
-    total: total,
-    time: 0,
-    action: 'Render',
-    items: items,
-    selected: null
-  },
-  methods: {
-    shuffle: monitor('shuffle', function () {
-      this.items = _.shuffle(this.items)
-    }),
-    add: monitor('add', function () {
-      this.items.push({
-        id: total++,
+    <script>
+    var total = 1000
+    var items = []
+    for (var i = 0; i < total; i++) {
+      items.push({
+        id: i,
        label: String(Math.random()).slice(0, 5)
      })
-    }),
-    select: monitor('select', function (item) {
-      this.selected = item.id
-    }),
-    remove: monitor('remove', function (item) {
-      this.items.splice(this.items.indexOf(item), 1)
-    })
-  },
-  components: {
-    row: {
-      props: ['item'],
-      template: '#row'
    }
-  }
-})
-setTimeout(function () {
-  vm.time = window.performance.now() - s
-  console.profileEnd('render')
-}, 0)

-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
+    console.profile('render')
+    var vm = new Vue({
+      el: '#el',
+      template: '#t',
+      data: {
+        total: total,
+        time: 0,
+        action: 'Render',
+        items: items,
+        selected: null
+      },
+      methods: {
+        shuffle: monitor('shuffle', function () {
+          this.items = _.shuffle(this.items)
+        }),
+        add: monitor('add', function () {
+          this.items.push({
+            id: total++,
+            label: String(Math.random()).slice(0, 5)
+          })
+        }),
+        select: monitor('select', function (item) {
+          this.selected = item.id
+        }),
+        remove: monitor('remove', function (item) {
+          this.items.splice(this.items.indexOf(item), 1)
+        })
+      },
+      components: {
+        row: {
+          props: ['item'],
+          template: '#row'
+        }
+      }
    })
-  }
-}
-</script>
+    setTimeout(function () {
+      vm.time = window.performance.now() - s
+      console.profileEnd('render')
+    }, 0)
+
+    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
+        })
+      }
+    }
+    </script>
+  </body>
+</html>