improvement

1. use hooked Node's prototype functions to do the fragment logical
2. use document fragment to improve efficiency

Author: kerlw

src/component.js

@@ -14,8 +14,6 @@ const unfreeze = (object, property, value = null) => {
   });
 };
 
-
-
 export default {
   abstract: true,
   name: 'Fragment',
@@ -28,8 +26,8 @@ export default {
   },
 
   mounted() {
-    const container = this.$el;
-    const parent = container.parentNode;
+    const container = this.$el
+    const parent = container.parentNode
 
     container.__isFragment = true
     container.__isMounted = false
@@ -39,90 +37,33 @@ export default {
 
     container.__head = head
     container.__tail = tail
-
-    parent.insertBefore(head, container)
-    parent.insertBefore(tail, container)
-
-    container.appendChild = (node) => {
-      parent.insertBefore(node, tail)
-      freeze(node, 'parentNode', container)
-    }
-
-    container.insertBefore = (node, ref) => {
-      parent.insertBefore(node, ref)
-      freeze(node, 'parentNode', container)
-    }
-
-    container.removeChild = (node) => {
-      parent.removeChild(node)
-      unfreeze(node, 'parentNode')
-    }
+    
+    // use document fragment to improve efficiency
+    let tpl = document.createDocumentFragment()
+    tpl.appendChild(head)
 
     Array.from(container.childNodes)
-      .forEach(node => container.appendChild(node))
-
+        .forEach(node => {
+            // container.appendChild(node, true)
+            let notFrChild = !node.hasOwnProperty('__isFragmentChild__')
+            tpl.appendChild(node)
+            if (notFrChild) {
+                freeze(node, 'parentNode', container)
+                freeze(node, '__isFragmentChild__', true)
+            }
+        })
+
+    tpl.appendChild(tail)
+
+    let next = container.nextSibling
+    parent.insertBefore(tpl, container, true)
     parent.removeChild(container)
-
     freeze(container, 'parentNode', parent)
-    freeze(container, 'nextSibling', tail.nextSibling)
-    if (tail.nextSibling)
-      freeze(tail.nextSibling, 'previousSibling', container)
+    freeze(container, 'nextSibling', next)
+    if (next)
+        freeze(next, 'previousSibling', container)
 
     container.__isMounted = true
-
-    if (!parent.__isFragmentParent) {
-      parent.__isFragmentParent = true
-      const insertBefore = parent.insertBefore;
-      parent.insertBefore = (node, ref) => {
-        let realRef = !!ref && !!ref.__isFragment && !!ref.__isMounted ? ref.__head : ref
-        if (!!node.__isFragment && !!node.__isMounted) {
-          if (node === ref) {
-            console.error("something must be wrong")
-            return
-          }
-          freeze(node, 'parentNode', parent)
-          if (node.previousSibling)
-            freeze(node.previousSibling, 'nextSibling', node.nextSibling)
-          if (node.nextSibling)
-            freeze(node.nextSibling, 'previousSibling', node.previousSibling)
-          freeze(node, 'nextSibling', ref)
-          freeze(node, 'previousSibling', ref.previousSibling)
-          if (ref.previousSibling)
-            freeze(ref.previousSibling, 'nextSibling', node)
-          freeze(ref, 'previousSibling', node)
-
-          let children = []
-          let ele = node.__head
-          while (ele !== node.__tail) {
-            children.push(ele)
-            ele = ele.nextSibling
-          }
-          children.push(node.__tail)
-          for (let child of children) {
-            insertBefore.call(parent, child, realRef)
-          }
-        } else
-          insertBefore.call(parent, node, realRef)
-      }
-
-        
-      const removeChild = parent.removeChild;
-      parent.removeChild = (node) => {
-        if (!!node.__isFragment && !!node.__isMounted) {
-          while (node.__head.nextSibling !== node.__tail)
-            node.removeChild(node.__head.nextSibling)// container.removeChild(head.nextSibling)
-
-          parent.removeChild(node.__head)
-          parent.removeChild(node.__tail)
-          unfreeze(container, 'parentNode')
-
-          // parent.insertBefore = insertBefore
-          // parent.removeChild = removeChild
-        } else {
-          removeChild.call(parent, node)
-        }
-      }
-    }
   },
 
   render(h) {