add benchmarks

Author: yyx990803

Diff for: benchmarks/big-table/demo.css

@@ -0,0 +1,15 @@
+form {
+  margin-bottom: 15px ;
+}
+
+td.hidden {
+  color: #ccc;
+}
+
+table.filtered td.item {
+  background-color: #FFFFBF;
+}
+
+table.filtered td.item.hidden {
+  background-color: transparent;
+}

Diff for: benchmarks/big-table/index.html

@@ -0,0 +1,125 @@
+<script src="../../dist/vue.js"></script>
+<link rel="stylesheet" href="style.css">
+<link rel="stylesheet" href="demo.css">
+
+<div id="el">
+  <h1>
+    Rendering Large Datasets With Vue {{renderTime}}
+  </h1>
+
+  <form>
+    <strong>Filter Data</strong>:
+    <input type="text" v-model="filter">
+
+    <!--
+      If the user is filtering the data, we want to offer some insight into
+      the breadth of the filtering.
+    -->
+    <span v-if="filter">
+      &mdash;
+      Filtering <strong>{{ filter }}</strong>
+      over {{ dataPoints }} data points,
+      {{ visibleCount() }} found.
+    </span>
+
+    <!-- Provide tooling to unmount and remount the grid. -->
+    <!-- <a v-if="grid.length" v-on="click:unmountGrid">Unmount Grid</a> -->
+    <a @click="remountGrid">Remount Grid</a>
+  </form>
+
+  <table width="100%" cellspacing="2" :class="{ filtered: filter }">
+    <tr v-for="row in grid">
+      <th>{{ row.id }}</th>
+      <td v-for="item in row.items"
+        class="item"
+        :class="{ hidden: !matches(item) }">
+        {{ item.value }}
+      </td>
+    </tr>
+  </table>
+</div>
+
+<script>
+function generateGrid( rowCount, columnCount ) {
+  var valuePoints = [
+    "Daenerys", "Jon", "Sansa", "Arya", "Stannis", "Gregor", "Tyrion",
+    "Theon", "Joffrey", "Ramsay", "Cersei", "Bran", "Margaery",
+    "Melisandre", "Daario", "Jamie", "Eddard", "Myrcella", "Robb",
+    "Jorah", "Petyr", "Tommen", "Sandor", "Oberyn", "Drogo", "Ygritte"
+  ];
+  var valueIndex = 0;
+  var grid = [];
+
+  for ( var r = 0 ; r < rowCount ; r++ ) {
+    var row = {
+      id: r,
+      items: []
+    };
+    for ( var c = 0 ; c < columnCount ; c++ ) {
+      row.items.push({
+        id: ( r + "-" + c ),
+        value: valuePoints[ valueIndex ]
+      });
+      if ( ++valueIndex >= valuePoints.length ) {
+        valueIndex = 0;
+      }
+    }
+    grid.push( row );
+  }
+
+  return( grid );
+}
+
+var grid = generateGrid(1000, 10)
+var s = window.performance.now()
+console.profile('a')
+var vm = new Vue({
+
+  el: '#el',
+
+  data: {
+    renderTime: 0,
+    grid: Object.freeze(grid),
+    dataPoints: grid.length * grid[0].items.length,
+    filter: ''
+  },
+
+  methods: {
+    updateFilter (e) {
+      this.filter = e.target.value.toLowerCase()
+    },
+    matches (item) {
+      return item.value.toLowerCase().indexOf(this.filter) > -1
+    },
+    visibleCount () {
+      var count = 0
+      var grid = this.grid
+      for (var i = 0, l = grid.length; i < l; i++) {
+        var row = grid[i].items
+        for (var j = 0, k = row.length; j < k; j++) {
+          var item = row[j]
+          var matched = !this.filter || this.matches(item)
+          if (matched) {
+            count++
+          }
+        }
+      }
+      return count
+    },
+    unmountGrid: function () {
+      this.grid = []
+    },
+    remountGrid: function () {
+      this.grid = generateGrid(1000, 10)
+      console.profile('unmount')
+      Vue.nextTick(function () {
+        console.profileEnd('unmount')
+      })
+    }
+  }
+})
+console.profileEnd('a')
+setTimeout(function () {
+  vm.renderTime = window.performance.now() - s
+}, 0)
+</script>