add initial load metrics to todomvc example

examples/todomvc/index.html

@@ -75,23 +75,31 @@
         </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

@@ -1,75 +0,0 @@
-// Benchmark
-// add 100 items
-// toggle them one by one
-// then delete them one by one
-
-(function () {
-
-    var benchSetting = window.location.search.match(/\bbenchmark=(\d+)/)
-    if (!benchSetting) return
-    
-    var itemsToAdd = +benchSetting[1],
-        now = window.performance && window.performance.now
-            ? function () { return window.performance.now(); }
-            : Date.now,
-        beforeBoot = now(),
-        render,
-        bench,
-        addTime,
-        toggleTime,
-        removeTime
-
-    setTimeout(function () {
-
-        boot = now() - beforeBoot
-
-        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('Benchmark x ' + itemsToAdd)
-            console.log('boot   : ' + boot.toFixed(2) + 'ms')
-            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)
-
-})()

examples/todomvc/js/perf.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)