perf: Implement DocumentFragment batch rendering for tab lists

Author: User

src/components/panel-windows.ts

@@ -255,7 +255,7 @@ export class PanelWindowsElement extends HTMLElement {
       displayedContainers = displayedContainers.filter((displayedContainer) => displayedContainer.cookieStore.isPrivate == false);
       newGroupMenuItem.hidden = false;
     }
-    displayedContainers = [... displayedContainers].sort((a, b) => {
+    displayedContainers = [...displayedContainers].sort((a, b) => {
       return tabGroupDirectorySnapshot.cookieStoreIdSortingCallback(a.cookieStore.id, b.cookieStore.id);
     });
 
@@ -332,6 +332,10 @@ export class PanelWindowsElement extends HTMLElement {
 
     const pinnedTabsElement = this.shadowRoot.querySelector('.pinned-tabs') as HTMLDivElement;
     pinnedTabsElement.textContent = '';
+
+    // Use DocumentFragment for batch DOM updates to reduce layout reflows
+    const fragment = document.createDocumentFragment();
+
     for (const pinnedTab of pinnedTabs) {
       const userContext = userContextMap.get(pinnedTab.cookieStore.id);
       if (!userContext) {
@@ -340,8 +344,13 @@ export class PanelWindowsElement extends HTMLElement {
       }
       const tabElement = this._popupRenderer.renderTab(pinnedTab, userContext);
       this.defineDragHandlersForPinnedTab(pinnedTab, tabElement);
-      pinnedTabsElement.appendChild(tabElement);
+
+      // Append to fragment (off-DOM) instead of directly to pinnedTabsElement
+      fragment.appendChild(tabElement);
     }
+
+    // Single appendChild - only one layout reflow
+    pinnedTabsElement.appendChild(fragment);
   }
 
   private createMenuItem(className: string, messageName: string, iconUrl: string, eventSink: EventSink<void>): CtgMenuItemElement {
@@ -395,7 +404,7 @@ export class PanelWindowsElement extends HTMLElement {
       displayedContainers = displayedContainers.filter((displayedContainer) => displayedContainer.cookieStore.isPrivate != true);
     }
     let tags = Object.values(this._browserState.tags);
-    const allUserContexts = [... displayedContainers];
+    const allUserContexts = [...displayedContainers];
     const searchWords = new Set(searchString.split(/\s+/u).map((searchWord) => searchWord.toLowerCase()));
     let tabs = Object.values(windowStateSnapshot.tabs).map((dao) => TabDao.toCompatTab(dao));
     for (const searchWord of searchWords) {
@@ -432,15 +441,24 @@ export class PanelWindowsElement extends HTMLElement {
       containerElement.containerVisibilityToggleButton.disabled = true;
       searchResultsContainersElement.appendChild(containerElement);
     }
+
+    // Use DocumentFragment for batch DOM updates to reduce layout reflows
+    const tabsFragment = document.createDocumentFragment();
+
     for (const tab of tabs) {
       const userContext = userContextMap.get(tab.cookieStore.id);
       if (!userContext) {
         console.error('Could not find user context for tab', tab);
         continue;
       }
       const tabElement = this._popupRenderer.renderTab(tab, userContext);
-      searchResultsTabsElement.appendChild(tabElement);
+
+      // Append to fragment (off-DOM) instead of directly to searchResultsTabsElement
+      tabsFragment.appendChild(tabElement);
     }
+
+    // Single appendChild - only one layout reflow
+    searchResultsTabsElement.appendChild(tabsFragment);
   }
 
   public focusToSearchBox() {

src/lib/tabs/BatchedTabRemovalHandler.ts

@@ -0,0 +1,94 @@
+/* -*- indent-tabs-mode: nil; tab-width: 2; -*- */
+/* vim: set ts=2 sw=2 et ai : */
+/**
+  Container Tab Groups
+  Copyright (C) 2023 Menhera.org
+
+  This program is free software: you can redistribute it and/or modify
+  it under the terms of the GNU General Public License as published by
+  the Free Software Foundation, either version 3 of the License, or
+  (at your option) any later version.
+
+  This program is distributed in the hope that it will be useful,
+  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  GNU General Public License for more details.
+
+  You should have received a copy of the GNU General Public License
+  along with this program.  If not, see <https://www.gnu.org/licenses/>.
+  @license
+**/
+
+/**
+ * Batched tab removal handler to prevent memory leaks and improve performance
+ * when removing multiple tabs in quick succession.
+ * 
+ * This handler debounces tab removal events and processes them in batches,
+ * reducing the number of expensive operations and preventing UI freezes.
+ */
+export class BatchedTabRemovalHandler {
+    private static instance: BatchedTabRemovalHandler;
+    private static readonly DEBOUNCE_DELAY_MS = 100; // 100ms buffer for batching
+
+    private pendingRemovals = new Set<number>();
+    private debounceTimer: ReturnType<typeof setTimeout> | null = null;
+
+    // Event listener management (simple Observer pattern)
+    private listeners: ((tabIds: number[]) => void)[] = [];
+
+    private constructor() {
+        // Private constructor for singleton
+    }
+
+    public static getInstance(): BatchedTabRemovalHandler {
+        if (!BatchedTabRemovalHandler.instance) {
+            BatchedTabRemovalHandler.instance = new BatchedTabRemovalHandler();
+        }
+        return BatchedTabRemovalHandler.instance;
+    }
+
+    /**
+     * Add a tab ID to the pending removal queue.
+     * The removal will be processed after the debounce delay.
+     */
+    public addRemoval(tabId: number): void {
+        this.pendingRemovals.add(tabId);
+        this.scheduleProcessing();
+    }
+
+    /**
+     * Register a listener to be called when a batch of tabs is removed.
+     * The listener will receive an array of tab IDs.
+     */
+    public onBatchRemoved(listener: (tabIds: number[]) => void): void {
+        this.listeners.push(listener);
+    }
+
+    /**
+     * Schedule batch processing with debounce.
+     * If called multiple times within the debounce delay, the timer is reset.
+     */
+    private scheduleProcessing(): void {
+        if (this.debounceTimer) {
+            clearTimeout(this.debounceTimer);
+        }
+        this.debounceTimer = setTimeout(() => {
+            this.processBatch();
+        }, BatchedTabRemovalHandler.DEBOUNCE_DELAY_MS);
+    }
+
+    /**
+     * Process the batch of pending tab removals.
+     * Notifies all registered listeners with the batch of tab IDs.
+     */
+    private processBatch(): void {
+        const tabIds = Array.from(this.pendingRemovals);
+        this.pendingRemovals.clear();
+        this.debounceTimer = null;
+
+        if (tabIds.length > 0) {
+            // Notify all listeners
+            this.listeners.forEach(listener => listener(tabIds));
+        }
+    }
+}

src/pages/popup-v2/legacy/PopupRenderer.ts

@@ -155,6 +155,9 @@ export class PopupRenderer {
     let tabCount = 0;
     let state = ContainerTabsState.NO_TABS;
     let tagId = 0;
+
+    // Collect elements for batch rendering with DocumentFragment
+    const elementsToAppend: HTMLElement[] = [];
     for (const tab of tabs) {
       if (IndexTab.isIndexTabUrl(tab.url)) {
         continue;
@@ -172,14 +175,15 @@ export class PopupRenderer {
           const tag = tabAttributeMap.getTagForTab(tab.id);
           if (tag) {
             const tagElement = new MenulistTagElement(tag);
-            element.appendChild(tagElement);
             tagElement.onTagButtonClicked.addListener(() => {
               const cookieStoreId = displayedContainer.cookieStore.id;
               const tagId = tag.tagId;
               this._containerTabOpenerService.openNewTabInContainer(cookieStoreId, true, windowId, tagId).catch((e) => {
                 console.error(e);
               });
             });
+            // Collect tag element for batch append
+            elementsToAppend.push(tagElement);
           }
         }
       }
@@ -218,9 +222,20 @@ export class PopupRenderer {
           console.error(e);
         });
       });
-      element.appendChild(tabElement);
+
+      // Collect tab element for batch append
+      elementsToAppend.push(tabElement);
       state = ContainerTabsState.VISIBLE_TABS;
     }
+
+    // Use DocumentFragment for batch DOM updates to reduce layout reflows
+    if (elementsToAppend.length > 0) {
+      const fragment = document.createDocumentFragment();
+      for (const el of elementsToAppend) {
+        fragment.appendChild(el);
+      }
+      element.appendChild(fragment);
+    }
     if (state === ContainerTabsState.HIDDEN_TABS) {
       element.containerHidden = true;
     }