perf: improve list sync

glimmerjs · Dec 27, 2023 · 7df1cf5 · 7df1cf5
1 parent ab04b99
commit 7df1cf5
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 7 deletions.
diff --git a/benchmark/benchmarks/krausest/lib/components/Application.ts b/benchmark/benchmarks/krausest/lib/components/Application.ts
@@ -131,9 +131,7 @@ export class Application {
     this.children.push(this.list);
   }
   removeItem(item: Item) {
-    const key = this.list.keyForItem(item);
     this.items = this.items.filter((i) => i.id !== item.id);
-    this.list.destroyListItem(key);
   }
   create_1_000_Items() {
     this.items = buildData(1000);

diff --git a/benchmark/benchmarks/krausest/lib/components/list.ts b/benchmark/benchmarks/krausest/lib/components/list.ts
@@ -29,10 +29,18 @@ export class ListComponent {
   }
   syncList(items: Item[]) {
     const existingKeys = new Set(this.keyMap.keys());
+    const updatingKeys = new Set(items.map((item) => this.keyForItem(item)));
+    const keysToRemove = [...existingKeys].filter((key) => !updatingKeys.has(key));
     const amountOfKeys = existingKeys.size;
     let targetNode = amountOfKeys > 0 ? this.parent : document.createDocumentFragment();
     const rowsToMove: Array<[ReturnType<typeof RowComponent>, number]> = [];
     let seenKeys = 0;
+
+    // iterate over existing keys and remove them
+    keysToRemove.forEach((key) => {
+      this.destroyListItem(key);
+    });
+
     items.forEach((item, index) => {
       if (seenKeys === amountOfKeys && !(targetNode instanceof DocumentFragment)) {
         // optimization for appending items case
@@ -46,16 +54,11 @@ export class ListComponent {
         this.keyMap.set(key, row);
       } else {
         seenKeys++;
-        existingKeys.delete(key);
         if (maybeRow.index !== index) {
           rowsToMove.push([maybeRow, index]);
         }
       }
     });
-    // iterate over existing keys and remove them
-    existingKeys.forEach((key) => {
-      this.destroyListItem(key);
-    });
     // iterate over rows to move and move them
     rowsToMove.forEach(([row, index]) => {
       const nextItem = items[index + 1];
@@ -84,6 +87,11 @@ export class ListComponent {
     row.nodes.forEach((node) => {
       node.parentElement?.removeChild(node);
     });
+    for (const value of this.keyMap.values()) {
+      if (value.index > row.index) {
+        value.index--;
+      }
+    }
     return this;
   }
 }