perf: use replace children for truncating nodes

Author: Varixo

packages/qwik/src/core/client/vnode-diff.ts

@@ -32,7 +32,7 @@ import {
   dangerouslySetInnerHTML,
 } from '../shared/utils/markers';
 import { isPromise } from '../shared/utils/promises';
-import { type ValueOrPromise } from '../shared/utils/types';
+import { isArray, type ValueOrPromise } from '../shared/utils/types';
 import {
   getEventNameFromJsxEvent,
   getEventNameScopeFromJsxEvent,
@@ -308,7 +308,7 @@ export const vnode_diff = (
    *   is an array produced by the `map` function.
    */
   function descend(children: JSXChildren, descendVNode: boolean) {
-    if (children == null) {
+    if (children == null || (isArray(children) && children.length === 0)) {
       expectNoChildren();
       return;
     }

packages/qwik/src/core/client/vnode.ts

@@ -183,8 +183,9 @@ export const enum VNodeJournalOpCode {
   SetText = 1, // ------ [SetAttribute, target, text]
   SetAttribute = 2, // - [SetAttribute, target, ...(key, values)]]
   HoistStyles = 3, // -- [HoistStyles, document]
-  Remove = 4, // ------- [Insert, target(parent), ...nodes]
-  Insert = 5, // ------- [Insert, target(parent), reference, ...nodes]
+  Remove = 4, // ------- [Remove, target(parent), ...nodes]
+  RemoveAll = 5, // ------- [RemoveAll, target(parent)]
+  Insert = 6, // ------- [Insert, target(parent), reference, ...nodes]
 }
 
 export type VNodeJournal = Array<
@@ -968,6 +969,15 @@ export const vnode_applyJournal = (journal: VNodeJournal) => {
           idx++;
         }
         break;
+      case VNodeJournalOpCode.RemoveAll:
+        const removeAllParent = journal[idx++] as Element;
+        if (removeAllParent.replaceChildren) {
+          removeAllParent.replaceChildren();
+        } else {
+          // fallback if replaceChildren is not supported
+          removeAllParent.textContent = '';
+        }
+        break;
       case VNodeJournalOpCode.Insert:
         const insertParent = journal[idx++] as Element;
         const insertBefore = journal[idx++] as Element | Text | null;
@@ -1220,8 +1230,7 @@ export const vnode_truncate = (
 ) => {
   assertDefined(vDelete, 'Missing vDelete.');
   const parent = vnode_getDomParent(vParent);
-  const children = vnode_getDOMChildNodes(journal, vDelete);
-  parent && children.length && journal.push(VNodeJournalOpCode.Remove, parent, ...children);
+  parent && journal.push(VNodeJournalOpCode.RemoveAll, parent);
   const vPrevious = vDelete.previousSibling;
   if (vPrevious) {
     vPrevious.nextSibling = null;