perf(vue): ignore to append existed node to improve router performance

Tencent · Nov 25, 2022 · cc24c27 · cc24c27
1 parent bbdd9ae
commit cc24c27
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 4 deletions.
diff --git a/packages/hippy-vue-next/src/runtime/node/hippy-node.ts b/packages/hippy-vue-next/src/runtime/node/hippy-node.ts
@@ -109,7 +109,6 @@ export class HippyNode extends HippyEventTarget {
    */
   public get lastChild(): HippyNode | null {
     const len = this.childNodes.length;
-
     return len ? this.childNodes[len - 1] : null;
   }
 
@@ -155,6 +154,8 @@ export class HippyNode extends HippyEventTarget {
       throw new Error('No child to append');
     }
 
+    // if childNode is the same as the last child, skip appending
+    if (this.lastChild === child) return;
     // If the node to be added has a parent node and
     // the parent node is not the current node, remove it from the container first
     // In the case of keep-alive, the node still exists and will be moved to the virtual container

diff --git a/packages/hippy-vue/src/renderer/__tests__/view-node.test.js b/packages/hippy-vue/src/renderer/__tests__/view-node.test.js
@@ -54,6 +54,10 @@ test('append exist child test', (t) => {
   parentNode.appendChild(childNode2);
   parentNode.appendChild(childNode);
   t.is(parentNode.lastChild, childNode);
+  parentNode.appendChild(childNode);
+  parentNode.appendChild(childNode);
+  t.is(parentNode.lastChild, childNode);
+  t.is(parentNode.childNodes.length, 3);
 });
 
 test('findChild test', (t) => {

diff --git a/packages/hippy-vue/src/renderer/view-node.js b/packages/hippy-vue/src/renderer/view-node.js
@@ -69,9 +69,8 @@ class ViewNode {
   }
 
   get lastChild() {
-    return this.childNodes.length
-      ? this.childNodes[this.childNodes.length - 1]
-      : null;
+    const len = this.childNodes.length;
+    return len ? this.childNodes[len - 1] : null;
   }
 
   get meta() {
@@ -182,6 +181,8 @@ class ViewNode {
     if (childNode.parentNode && childNode.parentNode !== this) {
       throw new Error('Can\'t append child, because it already has a different parent.');
     }
+    // if childNode is the same as the last child, skip appending
+    if (this.lastChild === childNode) return;
     // remove childNode if exist
     if (childNode.isMounted) {
       this.removeChild(childNode);