add initial load metrics to todomvc example

Author: Evan You

examples/todomvc/index.html

@@ -75,23 +75,31 @@ <h1>todos</h1>
         </section>
         <footer id="info">
             <p>Double-click to edit a todo</p>
-            <p>Powered by <a href="https://github.com/yyx990803/vue">VueJS</a></p>
+            <p>Powered by <a href="http://vuejs.org">Vue.js</a></p>
             <p>Created by <a href="http://evanyou.me">Evan You</a></p>
         </footer>
 
-        <!-- for PhantomJS/CasperJS testing only -->
+        <!-- testing/benchmark only -->
         <script>
             if (navigator.userAgent.indexOf('PhantomJS') > -1) {
                 localStorage.clear()
             }
+            var now = window.performance && window.performance.now
+                ? function () { return window.performance.now() }
+                : Date.now
+            var metrics = { beforeLoad: now() }
         </script>
-        <!-- end testing -->
+        <!-- end testing/bench -->
 
         <script src="../../dist/vue.js"></script>
+        <script>metrics.afterLoad = now()</script>
         <script src="bower_components/director/director.js"></script>
         <script src="js/store.js"></script>
+        <script>metrics.beforeRender = now()</script>
         <script src="js/app.js"></script>
         <script src="js/routes.js"></script>
-        <script src="js/benchmark.js"></script>
+        <script>metrics.afterRender = now()</script>
+        <script src="js/perf.js"></script>
+
     </body>
 </html>

examples/todomvc/js/benchmark.js

@@ -0,0 +1,74 @@
+setTimeout(function () {
+    
+    // Initial load & render metrics
+
+    metrics.afterRenderAsync = now()
+    console.log('Vue load     : ' + (metrics.afterLoad - metrics.beforeLoad).toFixed(2) + 'ms')
+    console.log('Render sync  : ' + (metrics.afterRender - metrics.beforeRender).toFixed(2) + 'ms')
+    console.log('Render async : ' + (metrics.afterRenderAsync - metrics.beforeRender).toFixed(2) + 'ms')
+    console.log('Total sync   : ' + (metrics.afterRender - metrics.beforeLoad).toFixed(2) + 'ms')
+    console.log('Total async  : ' + (metrics.afterRenderAsync - metrics.beforeLoad).toFixed(2) + 'ms')
+
+    // Benchmark
+    // add 100 items
+    // toggle them one by one
+    // then delete them one by one
+
+    var benchSetting = window.location.search.match(/\bbenchmark=(\d+)/)
+    if (!benchSetting) return
+
+    var itemsToAdd = +benchSetting[1],
+        render,
+        bench,
+        addTime,
+        toggleTime,
+        removeTime
+
+    var start = now(),
+        last
+
+    add()
+
+    function add() {
+        last = now()
+        var newTodo = '12345'
+        for (var i = 0; i < itemsToAdd; i++) {
+            app.newTodo = newTodo
+            app.addTodo()
+        }
+        setTimeout(toggle, 0)
+    }
+
+    function toggle () {
+        addTime = now() - last
+        var checkboxes = document.querySelectorAll('.toggle')
+        //for (var j = 0; j < 5; j++) {
+            for (var i = 0; i < checkboxes.length; i++) {
+                checkboxes[i].click()
+            }
+        //}
+        last = now()
+        setTimeout(remove, 0)
+    }
+
+    function remove () {
+        toggleTime = now() - last
+        var deleteButtons = document.querySelectorAll('.destroy');
+        for (var i = 0; i < deleteButtons.length; i++) {
+            deleteButtons[i].click()
+        }
+        last = now()
+        setTimeout(report, 0)
+    }
+
+    function report () {
+        bench = now() - start
+        removeTime = now() - last
+        console.log('\nBenchmark x ' + itemsToAdd)
+        console.log('add    : ' + addTime.toFixed(2) + 'ms')
+        console.log('toggle : ' + toggleTime.toFixed(2) + 'ms')
+        console.log('remove : ' + removeTime.toFixed(2) + 'ms')
+        console.log('total  : ' + bench.toFixed(2) + 'ms')
+    }
+
+}, 0)