update benchmarks, remove attach/detach in v-repeat as its actually e…

…xpensive in common use cases
vuejs · Dec 22, 2013 · f29be01 · f29be01
1 parent dc17a4e
commit f29be01
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 49 deletions.
diff --git a/examples/todomvc/js/benchmark.js b/examples/todomvc/js/benchmark.js
@@ -10,51 +10,65 @@ if (navigator.userAgent.indexOf('PhantomJS') === -1) {
 
 function runBenchmark () {
 
-    var now = window.performance && window.performance.now
+    var itemsToAdd = 200,
+        now = window.performance && window.performance.now
             ? function () { return window.performance.now(); }
             : Date.now,
-        beforeRender = now(),
+        beforeBoot = now(),
         render,
-        sync,
-        async
+        bench,
+        addTime,
+        toggleTime,
+        removeTime
 
     setTimeout(function () {
 
-        render = now() - beforeRender
+        boot = now() - beforeBoot
 
         var start = now(),
-            newTodo = '12345'
+            last
 
-        for (var i = 0; i < 100; i++) {
-            app.newTodo = newTodo
-            app.addTodo()
+        add()
+
+        function add() {
+            last = now()
+            var newTodo = '12345'
+            for (var i = 0; i < itemsToAdd; i++) {
+                app.newTodo = newTodo
+                app.addTodo()
+            }
+            setTimeout(toggle, 0)
         }
-        setTimeout(toggle, 0)
 
         function toggle () {
+            addTime = now() - last
             var checkboxes = document.querySelectorAll('.toggle')
             for (var i = 0; i < checkboxes.length; i++) {
                 checkboxes[i].click()
             }
-            setTimeout(del, 0)
+            last = now()
+            setTimeout(remove, 0)
         }
 
-        function del () {
+        function remove () {
+            toggleTime = now() - last
             var deleteButtons = document.querySelectorAll('.destroy');
             for (var i = 0; i < deleteButtons.length; i++) {
                 deleteButtons[i].click()
             }
-            report()
+            last = now()
+            setTimeout(report, 0)
         }
 
         function report () {
-            sync = now() - start
-            setTimeout(function () {
-                async = now() - start
-                console.log('render: ' + render.toFixed(2) + 'ms')
-                console.log('sync:   ' + sync.toFixed(2) + 'ms')
-                console.log('async:  ' + async.toFixed(2) + 'ms')
-            }, 0)   
+            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)
 

diff --git a/src/directives/repeat.js b/src/directives/repeat.js
@@ -107,13 +107,11 @@ module.exports = {
         self.collection = null
         self.vms = null
         self.mutationListener = function (path, arr, mutation) {
-            self.detach()
             var method = mutation.method
             mutationHandlers[method].call(self, mutation)
             if (method !== 'push' && method !== 'pop') {
                 self.updateIndexes()
             }
-            self.retach()
         }
 
     },
@@ -140,11 +138,9 @@ module.exports = {
 
         // create child-vms and append to DOM
         if (collection.length) {
-            this.detach()
             for (var i = 0, l = collection.length; i < l; i++) {
                 this.buildItem(collection[i], i)
             }
-            this.retach()
         }
     },
 
@@ -209,31 +205,6 @@ module.exports = {
         }
     },
 
-    /**
-     *  Detach/retach the container from the DOM before mutation
-     *  so that batch DOM updates are done in-memory and faster
-     */
-    detach: function () {
-        if (this.hasTrans) return
-        var c = this.container,
-            p = this.parent = c.parentNode
-        this.next = c.nextSibling
-        if (p) p.removeChild(c)
-    },
-
-    retach: function () {
-        if (this.hasTrans) return
-        var n = this.next,
-            p = this.parent,
-            c = this.container
-        if (!p) return
-        if (n) {
-            p.insertBefore(c, n)
-        } else {
-            p.appendChild(c)
-        }
-    },
-
     unbind: function () {
         if (this.collection) {
             this.collection.__observer__.off('mutate', this.mutationListener)