vuejs_renderPerformanceTest

vuejs render Performance Test

by Ryan Hsu

HTML

<div id="app">
  <h1>Performance Test</h1>
  <h2>跑1000筆資料，Render畫面時間</h2>
  <h3>vue.js效能測試</h3>
  <input type='button' value='開始' v-on:click="runtest" /> 花費時間：{{runtime}}
  <ul>
    <li v-for="todo in todos">
      {{ todo }}{{caculateRuntime($index)}}
    </li>
  </ul>
</div>

JavaScript

new Vue({
  el: '#app',
  data: {
    todos: [],
    starttime: undefined,
    runtime: 0
  },
  methods: {
    	caculateRuntime : function(last) {
        if (last == 999 && this.starttime) {
          this.runtime = (new Date() - this.starttime) + "ms";
          this.starttime = null;
        }
        return '';
      },
      runtest: function() {
        var data = [];
        for (var i = 0; i < 1000; i++) {
          data.push(i);
        }
        this.starttime = new Date();
        this.todos = data;
      }
  }

})