diff --git a/.changeset/refactor-mutation-pushadd.md b/.changeset/refactor-mutation-pushadd.md
new file mode 100644
index 0000000000..1ab78f667c
--- /dev/null
+++ b/.changeset/refactor-mutation-pushadd.md
@@ -0,0 +1,5 @@
+---
+"rrweb": patch
+---
+
+Improvements in efficiency of mutation handling; has been identified as a problem numerous times by mdellanoce, JonasBa and others
diff --git a/packages/rrweb/src/record/mutation.ts b/packages/rrweb/src/record/mutation.ts
index 08e927a98f..fccd72193d 100644
--- a/packages/rrweb/src/record/mutation.ts
+++ b/packages/rrweb/src/record/mutation.ts
@@ -6,7 +6,6 @@ import {
   isShadowRoot,
   needMaskingText,
   maskInputValue,
-  Mirror,
   isNativeShadowDom,
   getInputType,
   toLowerCase,
@@ -18,7 +17,6 @@ import type {
   attributeCursor,
   removedNodeMutation,
   addedNodeMutation,
-  Optional,
 } from '@rrweb/types';
 import {
   isBlocked,
@@ -34,104 +32,6 @@ import {
 } from '../utils';
 import dom from '@rrweb/utils';
 
-type DoubleLinkedListNode = {
-  previous: DoubleLinkedListNode | null;
-  next: DoubleLinkedListNode | null;
-  value: NodeInLinkedList;
-};
-type NodeInLinkedList = Node & {
-  __ln: DoubleLinkedListNode;
-};
-
-function isNodeInLinkedList(n: Node | NodeInLinkedList): n is NodeInLinkedList {
-  return '__ln' in n;
-}
-
-class DoubleLinkedList {
-  public length = 0;
-  public head: DoubleLinkedListNode | null = null;
-  public tail: DoubleLinkedListNode | null = null;
-
-  public get(position: number) {
-    if (position >= this.length) {
-      throw new Error('Position outside of list range');
-    }
-
-    let current = this.head;
-    for (let index = 0; index < position; index++) {
-      current = current?.next || null;
-    }
-    return current;
-  }
-
-  public addNode(n: Node) {
-    const node: DoubleLinkedListNode = {
-      value: n as NodeInLinkedList,
-      previous: null,
-      next: null,
-    };
-    (n as NodeInLinkedList).__ln = node;
-    if (n.previousSibling && isNodeInLinkedList(n.previousSibling)) {
-      const current = n.previousSibling.__ln.next;
-      node.next = current;
-      node.previous = n.previousSibling.__ln;
-      n.previousSibling.__ln.next = node;
-      if (current) {
-        current.previous = node;
-      }
-    } else if (
-      n.nextSibling &&
-      isNodeInLinkedList(n.nextSibling) &&
-      n.nextSibling.__ln.previous
-    ) {
-      const current = n.nextSibling.__ln.previous;
-      node.previous = current;
-      node.next = n.nextSibling.__ln;
-      n.nextSibling.__ln.previous = node;
-      if (current) {
-        current.next = node;
-      }
-    } else {
-      if (this.head) {
-        this.head.previous = node;
-      }
-      node.next = this.head;
-      this.head = node;
-    }
-    if (node.next === null) {
-      this.tail = node;
-    }
-    this.length++;
-  }
-
-  public removeNode(n: NodeInLinkedList) {
-    const current = n.__ln;
-    if (!this.head) {
-      return;
-    }
-
-    if (!current.previous) {
-      this.head = current.next;
-      if (this.head) {
-        this.head.previous = null;
-      } else {
-        this.tail = null;
-      }
-    } else {
-      current.previous.next = current.next;
-      if (current.next) {
-        current.next.previous = current.previous;
-      } else {
-        this.tail = current.previous;
-      }
-    }
-    if (n.__ln) {
-      delete (n as Optional<NodeInLinkedList, '__ln'>).__ln;
-    }
-    this.length--;
-  }
-}
-
 const moveKey = (id: number, parentId: number) => `${id}@${parentId}`;
 
 /**
@@ -272,45 +172,137 @@ export default class MutationBuffer {
     const adds: addedNodeMutation[] = [];
     const addedIds = new Set<number>();
 
-    /**
-     * Sometimes child node may be pushed before its newly added
-     * parent, so we init a queue to store these nodes.
-     */
-    const addList = new DoubleLinkedList();
-    const getNextId = (n: Node): number | null => {
-      let ns: Node | null = n;
-      let nextId: number | null = IGNORED_NODE; // slimDOM: ignored
-      while (nextId === IGNORED_NODE) {
-        ns = ns && ns.nextSibling;
-        nextId = ns && this.mirror.getId(ns);
+    while (this.mapRemoves.length) {
+      this.mirror.removeNodeFromMap(this.mapRemoves.shift()!);
+    }
+
+    for (const n of this.movedSet) {
+      const parentNode = dom.parentNode(n);
+      if (
+        parentNode && // can't be removed if it doesn't exist
+        this.removesSubTreeCache.has(parentNode) &&
+        !this.movedSet.has(parentNode)
+      ) {
+        continue;
       }
-      return nextId;
-    };
-    const pushAdd = (n: Node) => {
-      const parent = dom.parentNode(n);
-      if (!parent || !inDom(n)) {
-        return;
+      this.addedSet.add(n);
+    }
+
+    let n: Node | null = null;
+    let parentNode: Node | null = null;
+    let parentId = -1;
+    let nextSibling: Node | null = null;
+    let ancestorBad = false;
+    const missingParents = new Set<Node>();
+    while (this.addedSet.size) {
+      if (n !== null && this.addedSet.has(n.previousSibling as Node)) {
+        // reuse parentNode, parentId, ancestorBad
+        nextSibling = n; // n is a good next sibling
+        n = n.previousSibling as Node;
+      } else {
+        n = this.addedSet.values().next().value as Node; // pop
+
+        // eslint-disable-next-line no-constant-condition
+        while (true) {
+          parentNode = dom.parentNode(n);
+          if (this.addedSet.has(parentNode as Node)) {
+            // start at top of added tree so as not to serialize children before their parents (parentId requirement)
+            n = parentNode as Node;
+            continue;
+          }
+          break;
+        }
+
+        if (missingParents.has(parentNode as Node)) {
+          parentNode = null;
+        } else if (parentNode) {
+          // we have a new parentNode for a 'row' of DOM children
+          // perf: we reuse these calculations across all child nodes
+
+          if (!inDom(parentNode)) {
+            ancestorBad = true;
+          } else {
+            ancestorBad =
+              isSelfOrAncestorInSet(this.droppedSet, parentNode) ||
+              this.removesSubTreeCache.has(parentNode);
+
+            if (ancestorBad && isSelfOrAncestorInSet(this.movedSet, n)) {
+              // not bad, just moved
+              ancestorBad = false;
+            }
+          }
+
+          if (this.addedSet.has(parentNode.lastChild as Node)) {
+            // jump instead of crawling nextSibling to nextSibling
+            n = parentNode.lastChild as Node;
+            nextSibling = null;
+          } else {
+            // eslint-disable-next-line no-constant-condition
+            while (true) {
+              nextSibling = n.nextSibling;
+              if (this.addedSet.has(nextSibling as Node)) {
+                // keep going as we can't serialize a node before it's next sibling (nextId requirement)
+                n = nextSibling as Node;
+                continue;
+              }
+              break;
+            }
+          }
+
+          parentId = isShadowRoot(parentNode)
+            ? this.mirror.getId(getShadowHost(n))
+            : this.mirror.getId(parentNode);
+
+          // If the node is the direct child of a shadow root, we treat the shadow host as its parent node.
+          if (
+            parentId === -1 &&
+            parentNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE
+          ) {
+            const shadowHost = dom.host(parentNode as ShadowRoot);
+            parentId = this.mirror.getId(shadowHost);
+          }
+        }
+      }
+
+      this.addedSet.delete(n); // don't re-iterate
+
+      if (!parentNode || parentId === -1) {
+        missingParents.add(n); // ensure any added child nodes can also early-out
+        continue;
+      } else if (ancestorBad) {
+        // it's possible we could unify missingParents and this.droppedSet
+        // but would need to check the subtleties
+        this.droppedSet.add(n);
+        continue;
       }
+
       let cssCaptured = false;
       if (n.nodeType === Node.TEXT_NODE) {
-        const parentTag = (parent as Element).tagName;
+        const parentTag = (parentNode as Element).tagName;
         if (parentTag === 'TEXTAREA') {
           // genTextAreaValueMutation already called via parent
-          return;
-        } else if (parentTag === 'STYLE' && this.addedSet.has(parent)) {
+          continue;
+        } else if (parentTag === 'STYLE' && addedIds.has(parentId)) {
           // css content will be recorded via parent's _cssText attribute when
           // mutation adds entire <style> element
           cssCaptured = true;
         }
       }
 
-      const parentId = isShadowRoot(parent)
-        ? this.mirror.getId(getShadowHost(n))
-        : this.mirror.getId(parent);
-
-      const nextId = getNextId(n);
-      if (parentId === -1 || nextId === -1) {
-        return addList.addNode(n);
+      let nextId = nextSibling ? this.mirror.getId(nextSibling) : null;
+      while (nextId === IGNORED_NODE) {
+        nextSibling = nextSibling && nextSibling.nextSibling;
+        nextId = nextSibling && this.mirror.getId(nextSibling);
+      }
+      if (nextId === -1) {
+        // sibling not included in addedNodes, but
+        // no id as not yet serialized?
+        console.warn(
+          "Couldn't record new node. Couldn't find mirror id for nextSibling:",
+          nextSibling,
+        );
+        n = null; // don't iterate to previousSibling as we haven't successful serialized this node
+        continue;
       }
       const sn = serializeNodeWithId(n, {
         doc: this.doc,
@@ -338,9 +330,12 @@ export default class MutationBuffer {
               currentN as HTMLLinkElement,
             );
           }
-          if (hasShadowRoot(n)) {
+          if (hasShadowRoot(n as Node)) {
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            this.shadowDomManager.addShadowRoot(dom.shadowRoot(n)!, this.doc);
+            this.shadowDomManager.addShadowRoot(
+              dom.shadowRoot(n as Node)!,
+              this.doc,
+            );
           }
         },
         onIframeLoad: (iframe, childSn) => {
@@ -360,92 +355,6 @@ export default class MutationBuffer {
         });
         addedIds.add(sn.id);
       }
-    };
-
-    while (this.mapRemoves.length) {
-      this.mirror.removeNodeFromMap(this.mapRemoves.shift()!);
-    }
-
-    for (const n of this.movedSet) {
-      if (
-        isParentRemoved(this.removesSubTreeCache, n, this.mirror) &&
-        !this.movedSet.has(dom.parentNode(n)!)
-      ) {
-        continue;
-      }
-      pushAdd(n);
-    }
-
-    for (const n of this.addedSet) {
-      if (
-        !isAncestorInSet(this.droppedSet, n) &&
-        !isParentRemoved(this.removesSubTreeCache, n, this.mirror)
-      ) {
-        pushAdd(n);
-      } else if (isAncestorInSet(this.movedSet, n)) {
-        pushAdd(n);
-      } else {
-        this.droppedSet.add(n);
-      }
-    }
-
-    let candidate: DoubleLinkedListNode | null = null;
-    while (addList.length) {
-      let node: DoubleLinkedListNode | null = null;
-      if (candidate) {
-        const parentId = this.mirror.getId(dom.parentNode(candidate.value));
-        const nextId = getNextId(candidate.value);
-        if (parentId !== -1 && nextId !== -1) {
-          node = candidate;
-        }
-      }
-      if (!node) {
-        let tailNode = addList.tail;
-        while (tailNode) {
-          const _node = tailNode;
-          tailNode = tailNode.previous;
-          // ensure _node is defined before attempting to find value
-          if (_node) {
-            const parentId = this.mirror.getId(dom.parentNode(_node.value));
-            const nextId = getNextId(_node.value);
-
-            if (nextId === -1) continue;
-            // nextId !== -1 && parentId !== -1
-            else if (parentId !== -1) {
-              node = _node;
-              break;
-            }
-            // nextId !== -1 && parentId === -1 This branch can happen if the node is the child of shadow root
-            else {
-              const unhandledNode = _node.value;
-              const parent = dom.parentNode(unhandledNode);
-              // If the node is the direct child of a shadow root, we treat the shadow host as its parent node.
-              if (parent && parent.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
-                const shadowHost = dom.host(parent as ShadowRoot);
-                const parentId = this.mirror.getId(shadowHost);
-                if (parentId !== -1) {
-                  node = _node;
-                  break;
-                }
-              }
-            }
-          }
-        }
-      }
-      if (!node) {
-        /**
-         * If all nodes in queue could not find a serialized parent,
-         * it may be a bug or corner case. We need to escape the
-         * dead while loop at once.
-         */
-        while (addList.head) {
-          addList.removeNode(addList.head.value);
-        }
-        break;
-      }
-      candidate = node.previous;
-      addList.removeNode(node.value);
-      pushAdd(node.value);
     }
 
     const payload = {
@@ -828,33 +737,18 @@ function processRemoves(n: Node, cache: Set<Node>) {
   return;
 }
 
-function isParentRemoved(removes: Set<Node>, n: Node, mirror: Mirror): boolean {
-  if (removes.size === 0) return false;
-  return _isParentRemoved(removes, n, mirror);
-}
-
-function _isParentRemoved(
-  removes: Set<Node>,
-  n: Node,
-  _mirror: Mirror,
-): boolean {
-  const node: ParentNode | null = dom.parentNode(n);
-  if (!node) return false;
-  return removes.has(node);
-}
-
-function isAncestorInSet(set: Set<Node>, n: Node): boolean {
+function isSelfOrAncestorInSet(set: Set<Node>, n: Node): boolean {
   if (set.size === 0) return false;
-  return _isAncestorInSet(set, n);
+  return _isSelfOrAncestorInSet(set, n);
 }
 
-function _isAncestorInSet(set: Set<Node>, n: Node): boolean {
+function _isSelfOrAncestorInSet(set: Set<Node>, n: Node): boolean {
+  if (set.has(n)) {
+    return true;
+  }
   const parent = dom.parentNode(n);
   if (!parent) {
     return false;
   }
-  if (set.has(parent)) {
-    return true;
-  }
-  return _isAncestorInSet(set, parent);
+  return _isSelfOrAncestorInSet(set, parent);
 }
diff --git a/packages/rrweb/test/__snapshots__/integration.test.ts.snap b/packages/rrweb/test/__snapshots__/integration.test.ts.snap
index 738f2fe8e2..051e82325b 100644
--- a/packages/rrweb/test/__snapshots__/integration.test.ts.snap
+++ b/packages/rrweb/test/__snapshots__/integration.test.ts.snap
@@ -3867,352 +3867,352 @@ exports[`record integration tests > can record node mutations 1`] = `
       ],
       \\"adds\\": [
         {
-          \\"parentId\\": 25,
-          \\"nextId\\": 34,
+          \\"parentId\\": 18,
+          \\"nextId\\": null,
           \\"node\\": {
             \\"type\\": 2,
-            \\"tagName\\": \\"a\\",
+            \\"tagName\\": \\"div\\",
             \\"attributes\\": {
-              \\"href\\": \\"javascript:void(0)\\",
-              \\"class\\": \\"select2-choice\\",
-              \\"tabindex\\": \\"-1\\"
+              \\"class\\": \\"select2-drop select2-display-none select2-with-searchbox select2-drop-active\\",
+              \\"id\\": \\"select2-drop\\",
+              \\"style\\": \\"left: Npx; width: Npx; top: Npx; bottom: auto; display: block;\\"
             },
             \\"childNodes\\": [],
-            \\"id\\": 26
+            \\"id\\": 36
           }
         },
         {
-          \\"parentId\\": 26,
-          \\"nextId\\": 28,
+          \\"parentId\\": 18,
+          \\"nextId\\": 36,
           \\"node\\": {
-            \\"type\\": 3,
-            \\"textContent\\": \\"   \\",
-            \\"id\\": 27
+            \\"type\\": 2,
+            \\"tagName\\": \\"div\\",
+            \\"attributes\\": {
+              \\"id\\": \\"select2-drop-mask\\",
+              \\"class\\": \\"select2-drop-mask\\",
+              \\"style\\": \\"\\"
+            },
+            \\"childNodes\\": [],
+            \\"id\\": 67
           }
         },
         {
-          \\"parentId\\": 26,
-          \\"nextId\\": 30,
+          \\"parentId\\": 36,
+          \\"nextId\\": null,
           \\"node\\": {
             \\"type\\": 2,
-            \\"tagName\\": \\"span\\",
+            \\"tagName\\": \\"ul\\",
             \\"attributes\\": {
-              \\"class\\": \\"select2-chosen\\",
-              \\"id\\": \\"select2-chosen-1\\"
+              \\"class\\": \\"select2-results\\",
+              \\"role\\": \\"listbox\\",
+              \\"id\\": \\"select2-results-1\\"
             },
             \\"childNodes\\": [],
-            \\"id\\": 28
+            \\"id\\": 45
           }
         },
         {
-          \\"parentId\\": 28,
-          \\"nextId\\": null,
+          \\"parentId\\": 36,
+          \\"nextId\\": 45,
           \\"node\\": {
             \\"type\\": 3,
-            \\"textContent\\": \\"A\\",
-            \\"id\\": 29
+            \\"textContent\\": \\"   \\",
+            \\"id\\": 44
           }
         },
         {
-          \\"parentId\\": 26,
-          \\"nextId\\": 31,
+          \\"parentId\\": 36,
+          \\"nextId\\": 44,
           \\"node\\": {
             \\"type\\": 2,
-            \\"tagName\\": \\"abbr\\",
+            \\"tagName\\": \\"div\\",
             \\"attributes\\": {
-              \\"class\\": \\"select2-search-choice-close\\"
+              \\"class\\": \\"select2-search\\"
             },
             \\"childNodes\\": [],
-            \\"id\\": 30
+            \\"id\\": 38
           }
         },
         {
-          \\"parentId\\": 26,
-          \\"nextId\\": 32,
+          \\"parentId\\": 36,
+          \\"nextId\\": 38,
           \\"node\\": {
             \\"type\\": 3,
             \\"textContent\\": \\"   \\",
-            \\"id\\": 31
+            \\"id\\": 37
           }
         },
         {
-          \\"parentId\\": 26,
+          \\"parentId\\": 45,
           \\"nextId\\": null,
           \\"node\\": {
             \\"type\\": 2,
-            \\"tagName\\": \\"span\\",
+            \\"tagName\\": \\"li\\",
             \\"attributes\\": {
-              \\"class\\": \\"select2-arrow\\",
+              \\"class\\": \\"select2-results-dept-0 select2-result select2-result-selectable\\",
               \\"role\\": \\"presentation\\"
             },
             \\"childNodes\\": [],
-            \\"id\\": 32
+            \\"id\\": 68
           }
         },
         {
-          \\"parentId\\": 32,
-          \\"nextId\\": null,
+          \\"parentId\\": 45,
+          \\"nextId\\": 68,
           \\"node\\": {
             \\"type\\": 2,
-            \\"tagName\\": \\"b\\",
+            \\"tagName\\": \\"li\\",
             \\"attributes\\": {
+              \\"class\\": \\"select2-results-dept-0 select2-result select2-result-selectable select2-highlighted\\",
               \\"role\\": \\"presentation\\"
             },
             \\"childNodes\\": [],
-            \\"id\\": 33
+            \\"id\\": 69
           }
         },
         {
-          \\"parentId\\": 18,
+          \\"parentId\\": 69,
           \\"nextId\\": null,
           \\"node\\": {
             \\"type\\": 2,
             \\"tagName\\": \\"div\\",
             \\"attributes\\": {
-              \\"class\\": \\"select2-drop select2-display-none select2-with-searchbox select2-drop-active\\",
-              \\"id\\": \\"select2-drop\\",
-              \\"style\\": \\"left: Npx; width: Npx; top: Npx; bottom: auto; display: block;\\"
+              \\"class\\": \\"select2-result-label\\",
+              \\"id\\": \\"select2-result-label-2\\",
+              \\"role\\": \\"option\\"
             },
             \\"childNodes\\": [],
-            \\"id\\": 36
+            \\"id\\": 70
           }
         },
         {
-          \\"parentId\\": 36,
-          \\"nextId\\": 38,
+          \\"parentId\\": 70,
+          \\"nextId\\": null,
           \\"node\\": {
             \\"type\\": 3,
-            \\"textContent\\": \\"   \\",
-            \\"id\\": 37
+            \\"textContent\\": \\"A\\",
+            \\"id\\": 71
           }
         },
         {
-          \\"parentId\\": 36,
-          \\"nextId\\": 44,
+          \\"parentId\\": 70,
+          \\"nextId\\": 71,
+          \\"node\\": {
+            \\"type\\": 2,
+            \\"tagName\\": \\"span\\",
+            \\"attributes\\": {
+              \\"class\\": \\"select2-match\\"
+            },
+            \\"childNodes\\": [],
+            \\"id\\": 72
+          }
+        },
+        {
+          \\"parentId\\": 68,
+          \\"nextId\\": null,
           \\"node\\": {
             \\"type\\": 2,
             \\"tagName\\": \\"div\\",
             \\"attributes\\": {
-              \\"class\\": \\"select2-search\\"
+              \\"class\\": \\"select2-result-label\\",
+              \\"id\\": \\"select2-result-label-3\\",
+              \\"role\\": \\"option\\"
             },
             \\"childNodes\\": [],
-            \\"id\\": 38
+            \\"id\\": 73
           }
         },
         {
-          \\"parentId\\": 38,
-          \\"nextId\\": 40,
+          \\"parentId\\": 73,
+          \\"nextId\\": null,
           \\"node\\": {
             \\"type\\": 3,
-            \\"textContent\\": \\"       \\",
-            \\"id\\": 39
+            \\"textContent\\": \\"B\\",
+            \\"id\\": 74
           }
         },
         {
-          \\"parentId\\": 38,
-          \\"nextId\\": 41,
+          \\"parentId\\": 73,
+          \\"nextId\\": 74,
           \\"node\\": {
             \\"type\\": 2,
-            \\"tagName\\": \\"label\\",
+            \\"tagName\\": \\"span\\",
             \\"attributes\\": {
-              \\"for\\": \\"s2id_autogen1_search\\",
-              \\"class\\": \\"select2-offscreen\\"
+              \\"class\\": \\"select2-match\\"
             },
             \\"childNodes\\": [],
-            \\"id\\": 40
+            \\"id\\": 75
           }
         },
         {
-          \\"parentId\\": 38,
-          \\"nextId\\": 42,
+          \\"parentId\\": 62,
+          \\"nextId\\": null,
           \\"node\\": {
             \\"type\\": 3,
-            \\"textContent\\": \\"       \\",
-            \\"id\\": 41
+            \\"textContent\\": \\"2 results are available, use up and down arrow keys to navigate.\\",
+            \\"id\\": 76
           }
         },
         {
-          \\"parentId\\": 38,
-          \\"nextId\\": 43,
+          \\"parentId\\": 25,
+          \\"nextId\\": 34,
           \\"node\\": {
             \\"type\\": 2,
-            \\"tagName\\": \\"input\\",
+            \\"tagName\\": \\"a\\",
             \\"attributes\\": {
-              \\"type\\": \\"text\\",
-              \\"autocomplete\\": \\"off\\",
-              \\"autocorrect\\": \\"off\\",
-              \\"autocapitalize\\": \\"off\\",
-              \\"spellcheck\\": \\"false\\",
-              \\"class\\": \\"select2-input select2-focused\\",
-              \\"role\\": \\"combobox\\",
-              \\"aria-expanded\\": \\"true\\",
-              \\"aria-autocomplete\\": \\"list\\",
-              \\"aria-owns\\": \\"select2-results-1\\",
-              \\"id\\": \\"s2id_autogen1_search\\",
-              \\"placeholder\\": \\"\\",
-              \\"aria-activedescendant\\": \\"select2-result-label-2\\"
+              \\"href\\": \\"javascript:void(0)\\",
+              \\"class\\": \\"select2-choice\\",
+              \\"tabindex\\": \\"-1\\"
             },
             \\"childNodes\\": [],
-            \\"id\\": 42
+            \\"id\\": 26
           }
         },
         {
-          \\"parentId\\": 38,
+          \\"parentId\\": 26,
           \\"nextId\\": null,
           \\"node\\": {
-            \\"type\\": 3,
-            \\"textContent\\": \\"   \\",
-            \\"id\\": 43
+            \\"type\\": 2,
+            \\"tagName\\": \\"span\\",
+            \\"attributes\\": {
+              \\"class\\": \\"select2-arrow\\",
+              \\"role\\": \\"presentation\\"
+            },
+            \\"childNodes\\": [],
+            \\"id\\": 32
           }
         },
         {
-          \\"parentId\\": 36,
-          \\"nextId\\": 45,
+          \\"parentId\\": 26,
+          \\"nextId\\": 32,
           \\"node\\": {
             \\"type\\": 3,
             \\"textContent\\": \\"   \\",
-            \\"id\\": 44
+            \\"id\\": 31
           }
         },
         {
-          \\"parentId\\": 36,
-          \\"nextId\\": null,
+          \\"parentId\\": 26,
+          \\"nextId\\": 31,
           \\"node\\": {
             \\"type\\": 2,
-            \\"tagName\\": \\"ul\\",
+            \\"tagName\\": \\"abbr\\",
             \\"attributes\\": {
-              \\"class\\": \\"select2-results\\",
-              \\"role\\": \\"listbox\\",
-              \\"id\\": \\"select2-results-1\\"
+              \\"class\\": \\"select2-search-choice-close\\"
             },
             \\"childNodes\\": [],
-            \\"id\\": 45
+            \\"id\\": 30
           }
         },
         {
-          \\"parentId\\": 45,
-          \\"nextId\\": null,
+          \\"parentId\\": 26,
+          \\"nextId\\": 30,
           \\"node\\": {
             \\"type\\": 2,
-            \\"tagName\\": \\"li\\",
+            \\"tagName\\": \\"span\\",
             \\"attributes\\": {
-              \\"class\\": \\"select2-results-dept-0 select2-result select2-result-selectable\\",
-              \\"role\\": \\"presentation\\"
+              \\"class\\": \\"select2-chosen\\",
+              \\"id\\": \\"select2-chosen-1\\"
             },
             \\"childNodes\\": [],
-            \\"id\\": 67
+            \\"id\\": 28
           }
         },
         {
-          \\"parentId\\": 67,
-          \\"nextId\\": null,
+          \\"parentId\\": 26,
+          \\"nextId\\": 28,
           \\"node\\": {
-            \\"type\\": 2,
-            \\"tagName\\": \\"div\\",
-            \\"attributes\\": {
-              \\"class\\": \\"select2-result-label\\",
-              \\"id\\": \\"select2-result-label-3\\",
-              \\"role\\": \\"option\\"
-            },
-            \\"childNodes\\": [],
-            \\"id\\": 68
+            \\"type\\": 3,
+            \\"textContent\\": \\"   \\",
+            \\"id\\": 27
           }
         },
         {
-          \\"parentId\\": 68,
+          \\"parentId\\": 28,
           \\"nextId\\": null,
           \\"node\\": {
             \\"type\\": 3,
-            \\"textContent\\": \\"B\\",
-            \\"id\\": 69
+            \\"textContent\\": \\"A\\",
+            \\"id\\": 29
           }
         },
         {
-          \\"parentId\\": 18,
-          \\"nextId\\": 36,
+          \\"parentId\\": 32,
+          \\"nextId\\": null,
           \\"node\\": {
             \\"type\\": 2,
-            \\"tagName\\": \\"div\\",
+            \\"tagName\\": \\"b\\",
             \\"attributes\\": {
-              \\"id\\": \\"select2-drop-mask\\",
-              \\"class\\": \\"select2-drop-mask\\",
-              \\"style\\": \\"\\"
+              \\"role\\": \\"presentation\\"
             },
             \\"childNodes\\": [],
-            \\"id\\": 70
+            \\"id\\": 33
           }
         },
         {
-          \\"parentId\\": 62,
+          \\"parentId\\": 38,
           \\"nextId\\": null,
           \\"node\\": {
             \\"type\\": 3,
-            \\"textContent\\": \\"2 results are available, use up and down arrow keys to navigate.\\",
-            \\"id\\": 71
-          }
-        },
-        {
-          \\"parentId\\": 45,
-          \\"nextId\\": 67,
-          \\"node\\": {
-            \\"type\\": 2,
-            \\"tagName\\": \\"li\\",
-            \\"attributes\\": {
-              \\"class\\": \\"select2-results-dept-0 select2-result select2-result-selectable select2-highlighted\\",
-              \\"role\\": \\"presentation\\"
-            },
-            \\"childNodes\\": [],
-            \\"id\\": 72
+            \\"textContent\\": \\"   \\",
+            \\"id\\": 43
           }
         },
         {
-          \\"parentId\\": 72,
-          \\"nextId\\": null,
+          \\"parentId\\": 38,
+          \\"nextId\\": 43,
           \\"node\\": {
             \\"type\\": 2,
-            \\"tagName\\": \\"div\\",
+            \\"tagName\\": \\"input\\",
             \\"attributes\\": {
-              \\"class\\": \\"select2-result-label\\",
-              \\"id\\": \\"select2-result-label-2\\",
-              \\"role\\": \\"option\\"
+              \\"type\\": \\"text\\",
+              \\"autocomplete\\": \\"off\\",
+              \\"autocorrect\\": \\"off\\",
+              \\"autocapitalize\\": \\"off\\",
+              \\"spellcheck\\": \\"false\\",
+              \\"class\\": \\"select2-input select2-focused\\",
+              \\"role\\": \\"combobox\\",
+              \\"aria-expanded\\": \\"true\\",
+              \\"aria-autocomplete\\": \\"list\\",
+              \\"aria-owns\\": \\"select2-results-1\\",
+              \\"id\\": \\"s2id_autogen1_search\\",
+              \\"placeholder\\": \\"\\",
+              \\"aria-activedescendant\\": \\"select2-result-label-2\\"
             },
             \\"childNodes\\": [],
-            \\"id\\": 73
+            \\"id\\": 42
           }
         },
         {
-          \\"parentId\\": 73,
-          \\"nextId\\": null,
+          \\"parentId\\": 38,
+          \\"nextId\\": 42,
           \\"node\\": {
             \\"type\\": 3,
-            \\"textContent\\": \\"A\\",
-            \\"id\\": 74
+            \\"textContent\\": \\"       \\",
+            \\"id\\": 41
           }
         },
         {
-          \\"parentId\\": 73,
-          \\"nextId\\": 74,
+          \\"parentId\\": 38,
+          \\"nextId\\": 41,
           \\"node\\": {
             \\"type\\": 2,
-            \\"tagName\\": \\"span\\",
+            \\"tagName\\": \\"label\\",
             \\"attributes\\": {
-              \\"class\\": \\"select2-match\\"
+              \\"for\\": \\"s2id_autogen1_search\\",
+              \\"class\\": \\"select2-offscreen\\"
             },
             \\"childNodes\\": [],
-            \\"id\\": 75
+            \\"id\\": 40
           }
         },
         {
-          \\"parentId\\": 68,
-          \\"nextId\\": 69,
+          \\"parentId\\": 38,
+          \\"nextId\\": 40,
           \\"node\\": {
-            \\"type\\": 2,
-            \\"tagName\\": \\"span\\",
-            \\"attributes\\": {
-              \\"class\\": \\"select2-match\\"
-            },
-            \\"childNodes\\": [],
-            \\"id\\": 76
+            \\"type\\": 3,
+            \\"textContent\\": \\"       \\",
+            \\"id\\": 39
           }
         }
       ]
@@ -4241,7 +4241,7 @@ exports[`record integration tests > can record node mutations 1`] = `
     \\"data\\": {
       \\"source\\": 2,
       \\"type\\": 0,
-      \\"id\\": 70
+      \\"id\\": 67
     }
   },
   {
@@ -6135,11 +6135,11 @@ exports[`record integration tests > mutations should work when blocked class is
           }
         },
         {
-          \\"parentId\\": 76,
-          \\"nextId\\": null,
+          \\"parentId\\": 75,
+          \\"nextId\\": 76,
           \\"node\\": {
             \\"type\\": 2,
-            \\"tagName\\": \\"button\\",
+            \\"tagName\\": \\"div\\",
             \\"attributes\\": {},
             \\"childNodes\\": [],
             \\"id\\": 77
@@ -6149,24 +6149,24 @@ exports[`record integration tests > mutations should work when blocked class is
           \\"parentId\\": 77,
           \\"nextId\\": null,
           \\"node\\": {
-            \\"type\\": 3,
-            \\"textContent\\": \\"I1I2 VISIBLE\\",
+            \\"type\\": 2,
+            \\"tagName\\": \\"button\\",
+            \\"attributes\\": {},
+            \\"childNodes\\": [],
             \\"id\\": 78
           }
         },
         {
-          \\"parentId\\": 75,
-          \\"nextId\\": 76,
+          \\"parentId\\": 78,
+          \\"nextId\\": null,
           \\"node\\": {
-            \\"type\\": 2,
-            \\"tagName\\": \\"div\\",
-            \\"attributes\\": {},
-            \\"childNodes\\": [],
+            \\"type\\": 3,
+            \\"textContent\\": \\"I1I1 VISIBLE\\",
             \\"id\\": 79
           }
         },
         {
-          \\"parentId\\": 79,
+          \\"parentId\\": 76,
           \\"nextId\\": null,
           \\"node\\": {
             \\"type\\": 2,
@@ -6181,7 +6181,7 @@ exports[`record integration tests > mutations should work when blocked class is
           \\"nextId\\": null,
           \\"node\\": {
             \\"type\\": 3,
-            \\"textContent\\": \\"I1I1 VISIBLE\\",
+            \\"textContent\\": \\"I1I2 VISIBLE\\",
             \\"id\\": 81
           }
         }
@@ -6267,11 +6267,11 @@ exports[`record integration tests > mutations should work when blocked class is
           }
         },
         {
-          \\"parentId\\": 83,
-          \\"nextId\\": null,
+          \\"parentId\\": 82,
+          \\"nextId\\": 83,
           \\"node\\": {
             \\"type\\": 2,
-            \\"tagName\\": \\"button\\",
+            \\"tagName\\": \\"div\\",
             \\"attributes\\": {},
             \\"childNodes\\": [],
             \\"id\\": 84
@@ -6281,24 +6281,24 @@ exports[`record integration tests > mutations should work when blocked class is
           \\"parentId\\": 84,
           \\"nextId\\": null,
           \\"node\\": {
-            \\"type\\": 3,
-            \\"textContent\\": \\"I1I2 VISIBLE\\",
+            \\"type\\": 2,
+            \\"tagName\\": \\"button\\",
+            \\"attributes\\": {},
+            \\"childNodes\\": [],
             \\"id\\": 85
           }
         },
         {
-          \\"parentId\\": 82,
-          \\"nextId\\": 83,
+          \\"parentId\\": 85,
+          \\"nextId\\": null,
           \\"node\\": {
-            \\"type\\": 2,
-            \\"tagName\\": \\"div\\",
-            \\"attributes\\": {},
-            \\"childNodes\\": [],
+            \\"type\\": 3,
+            \\"textContent\\": \\"I1I1 VISIBLE\\",
             \\"id\\": 86
           }
         },
         {
-          \\"parentId\\": 86,
+          \\"parentId\\": 83,
           \\"nextId\\": null,
           \\"node\\": {
             \\"type\\": 2,
@@ -6313,7 +6313,7 @@ exports[`record integration tests > mutations should work when blocked class is
           \\"nextId\\": null,
           \\"node\\": {
             \\"type\\": 3,
-            \\"textContent\\": \\"I1I1 VISIBLE\\",
+            \\"textContent\\": \\"I1I2 VISIBLE\\",
             \\"id\\": 88
           }
         }
@@ -11217,11 +11217,11 @@ exports[`record integration tests > should record DOM node movement 1 1`] = `
         },
         {
           \\"parentId\\": 12,
-          \\"nextId\\": 14,
+          \\"nextId\\": null,
           \\"node\\": {
             \\"type\\": 3,
-            \\"textContent\\": \\"\\\\n      \\",
-            \\"id\\": 13
+            \\"textContent\\": \\"\\\\n    \\",
+            \\"id\\": 19
           }
         },
         {
@@ -11235,13 +11235,22 @@ exports[`record integration tests > should record DOM node movement 1 1`] = `
             \\"id\\": 14
           }
         },
+        {
+          \\"parentId\\": 12,
+          \\"nextId\\": 14,
+          \\"node\\": {
+            \\"type\\": 3,
+            \\"textContent\\": \\"\\\\n      \\",
+            \\"id\\": 13
+          }
+        },
         {
           \\"parentId\\": 14,
-          \\"nextId\\": 16,
+          \\"nextId\\": null,
           \\"node\\": {
             \\"type\\": 3,
-            \\"textContent\\": \\"\\\\n        \\",
-            \\"id\\": 15
+            \\"textContent\\": \\"\\\\n      \\",
+            \\"id\\": 18
           }
         },
         {
@@ -11255,31 +11264,22 @@ exports[`record integration tests > should record DOM node movement 1 1`] = `
             \\"id\\": 16
           }
         },
-        {
-          \\"parentId\\": 16,
-          \\"nextId\\": null,
-          \\"node\\": {
-            \\"type\\": 3,
-            \\"textContent\\": \\"1\\",
-            \\"id\\": 17
-          }
-        },
         {
           \\"parentId\\": 14,
-          \\"nextId\\": null,
+          \\"nextId\\": 16,
           \\"node\\": {
             \\"type\\": 3,
-            \\"textContent\\": \\"\\\\n      \\",
-            \\"id\\": 18
+            \\"textContent\\": \\"\\\\n        \\",
+            \\"id\\": 15
           }
         },
         {
-          \\"parentId\\": 12,
+          \\"parentId\\": 16,
           \\"nextId\\": null,
           \\"node\\": {
             \\"type\\": 3,
-            \\"textContent\\": \\"\\\\n    \\",
-            \\"id\\": 19
+            \\"textContent\\": \\"1\\",
+            \\"id\\": 17
           }
         }
       ]
@@ -11472,52 +11472,54 @@ exports[`record integration tests > should record DOM node movement 2 1`] = `
       ],
       \\"adds\\": [
         {
-          \\"parentId\\": 12,
-          \\"nextId\\": 14,
+          \\"parentId\\": 5,
+          \\"nextId\\": null,
           \\"node\\": {
-            \\"type\\": 3,
-            \\"textContent\\": \\"\\\\n      \\",
-            \\"id\\": 13
+            \\"type\\": 2,
+            \\"tagName\\": \\"div\\",
+            \\"attributes\\": {},
+            \\"childNodes\\": [],
+            \\"id\\": 24
           }
         },
         {
-          \\"parentId\\": 12,
-          \\"nextId\\": 19,
+          \\"parentId\\": 24,
+          \\"nextId\\": null,
           \\"node\\": {
             \\"type\\": 2,
-            \\"tagName\\": \\"i\\",
+            \\"tagName\\": \\"span\\",
             \\"attributes\\": {},
             \\"childNodes\\": [],
-            \\"id\\": 14
+            \\"id\\": 12
           }
         },
         {
-          \\"parentId\\": 14,
-          \\"nextId\\": 16,
+          \\"parentId\\": 12,
+          \\"nextId\\": null,
           \\"node\\": {
             \\"type\\": 3,
-            \\"textContent\\": \\"\\\\n        \\",
-            \\"id\\": 15
+            \\"textContent\\": \\"\\\\n    \\",
+            \\"id\\": 19
           }
         },
         {
-          \\"parentId\\": 14,
-          \\"nextId\\": 18,
+          \\"parentId\\": 12,
+          \\"nextId\\": 19,
           \\"node\\": {
             \\"type\\": 2,
-            \\"tagName\\": \\"b\\",
+            \\"tagName\\": \\"i\\",
             \\"attributes\\": {},
             \\"childNodes\\": [],
-            \\"id\\": 16
+            \\"id\\": 14
           }
         },
         {
-          \\"parentId\\": 16,
-          \\"nextId\\": null,
+          \\"parentId\\": 12,
+          \\"nextId\\": 14,
           \\"node\\": {
             \\"type\\": 3,
-            \\"textContent\\": \\"1\\",
-            \\"id\\": 17
+            \\"textContent\\": \\"\\\\n      \\",
+            \\"id\\": 13
           }
         },
         {
@@ -11530,34 +11532,32 @@ exports[`record integration tests > should record DOM node movement 2 1`] = `
           }
         },
         {
-          \\"parentId\\": 12,
-          \\"nextId\\": null,
+          \\"parentId\\": 14,
+          \\"nextId\\": 18,
           \\"node\\": {
-            \\"type\\": 3,
-            \\"textContent\\": \\"\\\\n    \\",
-            \\"id\\": 19
+            \\"type\\": 2,
+            \\"tagName\\": \\"b\\",
+            \\"attributes\\": {},
+            \\"childNodes\\": [],
+            \\"id\\": 16
           }
         },
         {
-          \\"parentId\\": 5,
-          \\"nextId\\": null,
+          \\"parentId\\": 14,
+          \\"nextId\\": 16,
           \\"node\\": {
-            \\"type\\": 2,
-            \\"tagName\\": \\"div\\",
-            \\"attributes\\": {},
-            \\"childNodes\\": [],
-            \\"id\\": 24
+            \\"type\\": 3,
+            \\"textContent\\": \\"\\\\n        \\",
+            \\"id\\": 15
           }
         },
         {
-          \\"parentId\\": 24,
+          \\"parentId\\": 16,
           \\"nextId\\": null,
           \\"node\\": {
-            \\"type\\": 2,
-            \\"tagName\\": \\"span\\",
-            \\"attributes\\": {},
-            \\"childNodes\\": [],
-            \\"id\\": 12
+            \\"type\\": 3,
+            \\"textContent\\": \\"1\\",
+            \\"id\\": 17
           }
         }
       ]
@@ -14258,7 +14258,9 @@ exports[`record integration tests > should record moved shadow DOM 1`] = `
           \\"node\\": {
             \\"type\\": 2,
             \\"tagName\\": \\"div\\",
-            \\"attributes\\": {},
+            \\"attributes\\": {
+              \\"id\\": \\"shadowHost\\"
+            },
             \\"childNodes\\": [],
             \\"id\\": 9,
             \\"isShadowHost\\": true
@@ -14270,7 +14272,9 @@ exports[`record integration tests > should record moved shadow DOM 1`] = `
           \\"node\\": {
             \\"type\\": 2,
             \\"tagName\\": \\"input\\",
-            \\"attributes\\": {},
+            \\"attributes\\": {
+              \\"id\\": \\"shadowContent\\"
+            },
             \\"childNodes\\": [],
             \\"id\\": 10,
             \\"isShadow\\": true
@@ -14293,38 +14297,44 @@ exports[`record integration tests > should record moved shadow DOM 1`] = `
       ],
       \\"adds\\": [
         {
-          \\"parentId\\": 9,
+          \\"parentId\\": 4,
           \\"nextId\\": null,
           \\"node\\": {
             \\"type\\": 2,
-            \\"tagName\\": \\"input\\",
-            \\"attributes\\": {},
+            \\"tagName\\": \\"div\\",
+            \\"attributes\\": {
+              \\"id\\": \\"newParent\\"
+            },
             \\"childNodes\\": [],
-            \\"id\\": 10,
-            \\"isShadow\\": true
+            \\"id\\": 11
           }
         },
         {
-          \\"parentId\\": 4,
+          \\"parentId\\": 11,
           \\"nextId\\": null,
           \\"node\\": {
             \\"type\\": 2,
             \\"tagName\\": \\"div\\",
-            \\"attributes\\": {},
+            \\"attributes\\": {
+              \\"id\\": \\"shadowHost\\"
+            },
             \\"childNodes\\": [],
-            \\"id\\": 11
+            \\"id\\": 9,
+            \\"isShadowHost\\": true
           }
         },
         {
-          \\"parentId\\": 11,
+          \\"parentId\\": 9,
           \\"nextId\\": null,
           \\"node\\": {
             \\"type\\": 2,
-            \\"tagName\\": \\"div\\",
-            \\"attributes\\": {},
+            \\"tagName\\": \\"input\\",
+            \\"attributes\\": {
+              \\"id\\": \\"shadowContent\\"
+            },
             \\"childNodes\\": [],
-            \\"id\\": 9,
-            \\"isShadowHost\\": true
+            \\"id\\": 10,
+            \\"isShadow\\": true
           }
         }
       ]
diff --git a/packages/rrweb/test/__snapshots__/record.test.ts.snap b/packages/rrweb/test/__snapshots__/record.test.ts.snap
index c1db08aea0..e7c836c825 100644
--- a/packages/rrweb/test/__snapshots__/record.test.ts.snap
+++ b/packages/rrweb/test/__snapshots__/record.test.ts.snap
@@ -1098,15 +1098,6 @@ exports[`record > captures adopted stylesheets in shadow doms and iframe 1`] = `
             \\"isShadow\\": true
           }
         },
-        {
-          \\"parentId\\": 26,
-          \\"nextId\\": null,
-          \\"node\\": {
-            \\"type\\": 3,
-            \\"textContent\\": \\"span in shadow dom 2\\",
-            \\"id\\": 27
-          }
-        },
         {
           \\"parentId\\": 16,
           \\"nextId\\": 26,
@@ -1115,16 +1106,25 @@ exports[`record > captures adopted stylesheets in shadow doms and iframe 1`] = `
             \\"tagName\\": \\"div\\",
             \\"attributes\\": {},
             \\"childNodes\\": [],
-            \\"id\\": 28,
+            \\"id\\": 27,
             \\"isShadow\\": true
           }
         },
         {
-          \\"parentId\\": 28,
+          \\"parentId\\": 27,
           \\"nextId\\": null,
           \\"node\\": {
             \\"type\\": 3,
             \\"textContent\\": \\"div in shadow dom 2\\",
+            \\"id\\": 28
+          }
+        },
+        {
+          \\"parentId\\": 26,
+          \\"nextId\\": null,
+          \\"node\\": {
+            \\"type\\": 3,
+            \\"textContent\\": \\"span in shadow dom 2\\",
             \\"id\\": 29
           }
         }
diff --git a/packages/rrweb/test/html/mutation.html b/packages/rrweb/test/html/mutation.html
new file mode 100644
index 0000000000..1f9324523a
--- /dev/null
+++ b/packages/rrweb/test/html/mutation.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<html>
+  <body></body>
+</html>
diff --git a/packages/rrweb/test/integration.test.ts b/packages/rrweb/test/integration.test.ts
index 89534c99c7..f5e3e20b2f 100644
--- a/packages/rrweb/test/integration.test.ts
+++ b/packages/rrweb/test/integration.test.ts
@@ -1071,18 +1071,22 @@ describe('record integration tests', function (this: ISuite) {
   it('should record moved shadow DOM', async () => {
     const page: puppeteer.Page = await browser.newPage();
     await page.goto('about:blank');
+    page.on('console', (msg) => console.log(msg.text()));
+
     await page.setContent(getHtml.call(this, 'blank.html'));
 
     await page.evaluate(() => {
       return new Promise((resolve) => {
         const el = document.createElement('div') as HTMLDivElement;
+        el.id = 'shadowHost';
         el.attachShadow({ mode: 'open' });
-        (el.shadowRoot as ShadowRoot).appendChild(
-          document.createElement('input'),
-        );
+        const inp = document.createElement('input') as HTMLInputElement;
+        inp.id = 'shadowContent';
+        (el.shadowRoot as ShadowRoot).appendChild(inp);
         document.body.append(el);
         setTimeout(() => {
           const newEl = document.createElement('div') as HTMLDivElement;
+          newEl.id = 'newParent';
           document.body.append(newEl);
           newEl.append(el);
           resolve(null);
diff --git a/packages/rrweb/test/record/__mutation.snapshots__/mutation.add_elements_all_at_once.json b/packages/rrweb/test/record/__mutation.snapshots__/mutation.add_elements_all_at_once.json
new file mode 100644
index 0000000000..cefe346ac3
--- /dev/null
+++ b/packages/rrweb/test/record/__mutation.snapshots__/mutation.add_elements_all_at_once.json
@@ -0,0 +1,85 @@
+[
+  {
+    "type": 3,
+    "data": {
+      "source": 0,
+      "texts": [],
+      "attributes": [],
+      "removes": [],
+      "adds": [
+        {
+          "parentId": 7,
+          "nextId": null,
+          "node": {
+            "type": 2,
+            "tagName": "div",
+            "attributes": {
+              "id": "d1"
+            },
+            "childNodes": [],
+            "id": 9
+          }
+        },
+        {
+          "parentId": 9,
+          "nextId": null,
+          "node": {
+            "type": 2,
+            "tagName": "div",
+            "attributes": {
+              "id": "d3"
+            },
+            "childNodes": [],
+            "id": 10
+          }
+        },
+        {
+          "parentId": 9,
+          "nextId": 10,
+          "node": {
+            "type": 2,
+            "tagName": "div",
+            "attributes": {
+              "id": "d2"
+            },
+            "childNodes": [],
+            "id": 11
+          }
+        },
+        {
+          "parentId": 9,
+          "nextId": 11,
+          "node": {
+            "type": 2,
+            "tagName": "span",
+            "attributes": {},
+            "childNodes": [],
+            "id": 12
+          }
+        },
+        {
+          "parentId": 11,
+          "nextId": null,
+          "node": {
+            "type": 2,
+            "tagName": "span",
+            "attributes": {},
+            "childNodes": [],
+            "id": 13
+          }
+        },
+        {
+          "parentId": 10,
+          "nextId": null,
+          "node": {
+            "type": 2,
+            "tagName": "span",
+            "attributes": {},
+            "childNodes": [],
+            "id": 14
+          }
+        }
+      ]
+    }
+  }
+]
\ No newline at end of file
diff --git a/packages/rrweb/test/record/__mutation.snapshots__/mutation.add_root_first.json b/packages/rrweb/test/record/__mutation.snapshots__/mutation.add_root_first.json
new file mode 100644
index 0000000000..cefe346ac3
--- /dev/null
+++ b/packages/rrweb/test/record/__mutation.snapshots__/mutation.add_root_first.json
@@ -0,0 +1,85 @@
+[
+  {
+    "type": 3,
+    "data": {
+      "source": 0,
+      "texts": [],
+      "attributes": [],
+      "removes": [],
+      "adds": [
+        {
+          "parentId": 7,
+          "nextId": null,
+          "node": {
+            "type": 2,
+            "tagName": "div",
+            "attributes": {
+              "id": "d1"
+            },
+            "childNodes": [],
+            "id": 9
+          }
+        },
+        {
+          "parentId": 9,
+          "nextId": null,
+          "node": {
+            "type": 2,
+            "tagName": "div",
+            "attributes": {
+              "id": "d3"
+            },
+            "childNodes": [],
+            "id": 10
+          }
+        },
+        {
+          "parentId": 9,
+          "nextId": 10,
+          "node": {
+            "type": 2,
+            "tagName": "div",
+            "attributes": {
+              "id": "d2"
+            },
+            "childNodes": [],
+            "id": 11
+          }
+        },
+        {
+          "parentId": 9,
+          "nextId": 11,
+          "node": {
+            "type": 2,
+            "tagName": "span",
+            "attributes": {},
+            "childNodes": [],
+            "id": 12
+          }
+        },
+        {
+          "parentId": 11,
+          "nextId": null,
+          "node": {
+            "type": 2,
+            "tagName": "span",
+            "attributes": {},
+            "childNodes": [],
+            "id": 13
+          }
+        },
+        {
+          "parentId": 10,
+          "nextId": null,
+          "node": {
+            "type": 2,
+            "tagName": "span",
+            "attributes": {},
+            "childNodes": [],
+            "id": 14
+          }
+        }
+      ]
+    }
+  }
+]
\ No newline at end of file
diff --git a/packages/rrweb/test/record/__mutation.snapshots__/mutation.blocked_endchild_element.json b/packages/rrweb/test/record/__mutation.snapshots__/mutation.blocked_endchild_element.json
new file mode 100644
index 0000000000..fe173a4e66
--- /dev/null
+++ b/packages/rrweb/test/record/__mutation.snapshots__/mutation.blocked_endchild_element.json
@@ -0,0 +1,50 @@
+[
+  {
+    "type": 3,
+    "data": {
+      "source": 0,
+      "texts": [],
+      "attributes": [],
+      "removes": [],
+      "adds": [
+        {
+          "parentId": 7,
+          "nextId": null,
+          "node": {
+            "type": 2,
+            "tagName": "div",
+            "attributes": {},
+            "childNodes": [],
+            "id": 9
+          }
+        },
+        {
+          "parentId": 9,
+          "nextId": null,
+          "node": {
+            "type": 2,
+            "tagName": "div",
+            "attributes": {
+              "class": "rr-block",
+              "rr_width": "1904px",
+              "rr_height": "0px"
+            },
+            "childNodes": [],
+            "id": 10
+          }
+        },
+        {
+          "parentId": 9,
+          "nextId": 10,
+          "node": {
+            "type": 2,
+            "tagName": "div",
+            "attributes": {},
+            "childNodes": [],
+            "id": 11
+          }
+        }
+      ]
+    }
+  }
+]
\ No newline at end of file
diff --git a/packages/rrweb/test/record/__mutation.snapshots__/mutation.blocked_firstchild_element.json b/packages/rrweb/test/record/__mutation.snapshots__/mutation.blocked_firstchild_element.json
new file mode 100644
index 0000000000..0ab828b8f4
--- /dev/null
+++ b/packages/rrweb/test/record/__mutation.snapshots__/mutation.blocked_firstchild_element.json
@@ -0,0 +1,50 @@
+[
+  {
+    "type": 3,
+    "data": {
+      "source": 0,
+      "texts": [],
+      "attributes": [],
+      "removes": [],
+      "adds": [
+        {
+          "parentId": 7,
+          "nextId": null,
+          "node": {
+            "type": 2,
+            "tagName": "div",
+            "attributes": {},
+            "childNodes": [],
+            "id": 9
+          }
+        },
+        {
+          "parentId": 9,
+          "nextId": null,
+          "node": {
+            "type": 2,
+            "tagName": "div",
+            "attributes": {},
+            "childNodes": [],
+            "id": 10
+          }
+        },
+        {
+          "parentId": 9,
+          "nextId": 10,
+          "node": {
+            "type": 2,
+            "tagName": "div",
+            "attributes": {
+              "class": "rr-block",
+              "rr_width": "1904px",
+              "rr_height": "0px"
+            },
+            "childNodes": [],
+            "id": 11
+          }
+        }
+      ]
+    }
+  }
+]
\ No newline at end of file
diff --git a/packages/rrweb/test/record/__mutation.snapshots__/mutation.blocked_middlechild_element.json b/packages/rrweb/test/record/__mutation.snapshots__/mutation.blocked_middlechild_element.json
new file mode 100644
index 0000000000..3a3d6bcbde
--- /dev/null
+++ b/packages/rrweb/test/record/__mutation.snapshots__/mutation.blocked_middlechild_element.json
@@ -0,0 +1,61 @@
+[
+  {
+    "type": 3,
+    "data": {
+      "source": 0,
+      "texts": [],
+      "attributes": [],
+      "removes": [],
+      "adds": [
+        {
+          "parentId": 7,
+          "nextId": null,
+          "node": {
+            "type": 2,
+            "tagName": "div",
+            "attributes": {},
+            "childNodes": [],
+            "id": 9
+          }
+        },
+        {
+          "parentId": 9,
+          "nextId": null,
+          "node": {
+            "type": 2,
+            "tagName": "div",
+            "attributes": {},
+            "childNodes": [],
+            "id": 10
+          }
+        },
+        {
+          "parentId": 9,
+          "nextId": 10,
+          "node": {
+            "type": 2,
+            "tagName": "div",
+            "attributes": {
+              "class": "rr-block",
+              "rr_width": "1904px",
+              "rr_height": "0px"
+            },
+            "childNodes": [],
+            "id": 11
+          }
+        },
+        {
+          "parentId": 9,
+          "nextId": 11,
+          "node": {
+            "type": 2,
+            "tagName": "div",
+            "attributes": {},
+            "childNodes": [],
+            "id": 12
+          }
+        }
+      ]
+    }
+  }
+]
\ No newline at end of file
diff --git a/packages/rrweb/test/record/__mutation.snapshots__/mutation.ignored_endchild_comment.json b/packages/rrweb/test/record/__mutation.snapshots__/mutation.ignored_endchild_comment.json
new file mode 100644
index 0000000000..1a43be4708
--- /dev/null
+++ b/packages/rrweb/test/record/__mutation.snapshots__/mutation.ignored_endchild_comment.json
@@ -0,0 +1,35 @@
+[
+  {
+    "type": 3,
+    "data": {
+      "source": 0,
+      "texts": [],
+      "attributes": [],
+      "removes": [],
+      "adds": [
+        {
+          "parentId": 7,
+          "nextId": null,
+          "node": {
+            "type": 2,
+            "tagName": "div",
+            "attributes": {},
+            "childNodes": [],
+            "id": 9
+          }
+        },
+        {
+          "parentId": 9,
+          "nextId": null,
+          "node": {
+            "type": 2,
+            "tagName": "div",
+            "attributes": {},
+            "childNodes": [],
+            "id": 10
+          }
+        }
+      ]
+    }
+  }
+]
\ No newline at end of file
diff --git a/packages/rrweb/test/record/__mutation.snapshots__/mutation.ignored_firstchild_comment.json b/packages/rrweb/test/record/__mutation.snapshots__/mutation.ignored_firstchild_comment.json
new file mode 100644
index 0000000000..1a43be4708
--- /dev/null
+++ b/packages/rrweb/test/record/__mutation.snapshots__/mutation.ignored_firstchild_comment.json
@@ -0,0 +1,35 @@
+[
+  {
+    "type": 3,
+    "data": {
+      "source": 0,
+      "texts": [],
+      "attributes": [],
+      "removes": [],
+      "adds": [
+        {
+          "parentId": 7,
+          "nextId": null,
+          "node": {
+            "type": 2,
+            "tagName": "div",
+            "attributes": {},
+            "childNodes": [],
+            "id": 9
+          }
+        },
+        {
+          "parentId": 9,
+          "nextId": null,
+          "node": {
+            "type": 2,
+            "tagName": "div",
+            "attributes": {},
+            "childNodes": [],
+            "id": 10
+          }
+        }
+      ]
+    }
+  }
+]
\ No newline at end of file
diff --git a/packages/rrweb/test/record/__mutation.snapshots__/mutation.ignored_middlechild_comment.json b/packages/rrweb/test/record/__mutation.snapshots__/mutation.ignored_middlechild_comment.json
new file mode 100644
index 0000000000..f00b054dd5
--- /dev/null
+++ b/packages/rrweb/test/record/__mutation.snapshots__/mutation.ignored_middlechild_comment.json
@@ -0,0 +1,46 @@
+[
+  {
+    "type": 3,
+    "data": {
+      "source": 0,
+      "texts": [],
+      "attributes": [],
+      "removes": [],
+      "adds": [
+        {
+          "parentId": 7,
+          "nextId": null,
+          "node": {
+            "type": 2,
+            "tagName": "div",
+            "attributes": {},
+            "childNodes": [],
+            "id": 9
+          }
+        },
+        {
+          "parentId": 9,
+          "nextId": null,
+          "node": {
+            "type": 2,
+            "tagName": "div",
+            "attributes": {},
+            "childNodes": [],
+            "id": 10
+          }
+        },
+        {
+          "parentId": 9,
+          "nextId": 10,
+          "node": {
+            "type": 2,
+            "tagName": "div",
+            "attributes": {},
+            "childNodes": [],
+            "id": 11
+          }
+        }
+      ]
+    }
+  }
+]
\ No newline at end of file
diff --git a/packages/rrweb/test/record/__mutation.snapshots__/mutation.siblings_added_in_idleCallback.json b/packages/rrweb/test/record/__mutation.snapshots__/mutation.siblings_added_in_idleCallback.json
new file mode 100644
index 0000000000..fbfdfe5210
--- /dev/null
+++ b/packages/rrweb/test/record/__mutation.snapshots__/mutation.siblings_added_in_idleCallback.json
@@ -0,0 +1,62 @@
+[
+  {
+    "type": 3,
+    "data": {
+      "source": 0,
+      "texts": [],
+      "attributes": [],
+      "removes": [
+        {
+          "parentId": 7,
+          "id": 8
+        }
+      ],
+      "adds": [
+        {
+          "parentId": 7,
+          "nextId": null,
+          "node": {
+            "type": 2,
+            "tagName": "div",
+            "attributes": {},
+            "childNodes": [],
+            "id": 9
+          }
+        }
+      ]
+    }
+  },
+  {
+    "type": 3,
+    "data": {
+      "source": 0,
+      "texts": [],
+      "attributes": [],
+      "removes": [],
+      "adds": [
+        {
+          "parentId": 7,
+          "nextId": null,
+          "node": {
+            "type": 2,
+            "tagName": "div",
+            "attributes": {},
+            "childNodes": [],
+            "id": 10
+          }
+        },
+        {
+          "parentId": 7,
+          "nextId": 9,
+          "node": {
+            "type": 2,
+            "tagName": "div",
+            "attributes": {},
+            "childNodes": [],
+            "id": 11
+          }
+        }
+      ]
+    }
+  }
+]
\ No newline at end of file
diff --git a/packages/rrweb/test/record/__snapshots__/cross-origin-iframes.test.ts.snap b/packages/rrweb/test/record/__snapshots__/cross-origin-iframes.test.ts.snap
index 8cd9fce959..0a9c06ad65 100644
--- a/packages/rrweb/test/record/__snapshots__/cross-origin-iframes.test.ts.snap
+++ b/packages/rrweb/test/record/__snapshots__/cross-origin-iframes.test.ts.snap
@@ -3916,57 +3916,59 @@ exports[`cross origin iframes > move-node.html > should record DOM node movement
       ],
       \\"adds\\": [
         {
-          \\"parentId\\": 24,
-          \\"nextId\\": 26,
+          \\"parentId\\": 17,
+          \\"nextId\\": null,
           \\"node\\": {
-            \\"type\\": 3,
-            \\"textContent\\": \\"\\\\n      \\",
+            \\"type\\": 2,
+            \\"tagName\\": \\"div\\",
+            \\"attributes\\": {},
+            \\"childNodes\\": [],
             \\"rootId\\": 11,
-            \\"id\\": 25
+            \\"id\\": 33
           }
         },
         {
-          \\"parentId\\": 24,
-          \\"nextId\\": 31,
+          \\"parentId\\": 33,
+          \\"nextId\\": null,
           \\"node\\": {
             \\"type\\": 2,
-            \\"tagName\\": \\"i\\",
+            \\"tagName\\": \\"span\\",
             \\"attributes\\": {},
             \\"childNodes\\": [],
             \\"rootId\\": 11,
-            \\"id\\": 26
+            \\"id\\": 24
           }
         },
         {
-          \\"parentId\\": 26,
-          \\"nextId\\": 28,
+          \\"parentId\\": 24,
+          \\"nextId\\": null,
           \\"node\\": {
             \\"type\\": 3,
-            \\"textContent\\": \\"\\\\n        \\",
+            \\"textContent\\": \\"\\\\n    \\",
             \\"rootId\\": 11,
-            \\"id\\": 27
+            \\"id\\": 31
           }
         },
         {
-          \\"parentId\\": 26,
-          \\"nextId\\": 30,
+          \\"parentId\\": 24,
+          \\"nextId\\": 31,
           \\"node\\": {
             \\"type\\": 2,
-            \\"tagName\\": \\"b\\",
+            \\"tagName\\": \\"i\\",
             \\"attributes\\": {},
             \\"childNodes\\": [],
             \\"rootId\\": 11,
-            \\"id\\": 28
+            \\"id\\": 26
           }
         },
         {
-          \\"parentId\\": 28,
-          \\"nextId\\": null,
+          \\"parentId\\": 24,
+          \\"nextId\\": 26,
           \\"node\\": {
             \\"type\\": 3,
-            \\"textContent\\": \\"1\\",
+            \\"textContent\\": \\"\\\\n      \\",
             \\"rootId\\": 11,
-            \\"id\\": 29
+            \\"id\\": 25
           }
         },
         {
@@ -3980,37 +3982,35 @@ exports[`cross origin iframes > move-node.html > should record DOM node movement
           }
         },
         {
-          \\"parentId\\": 24,
-          \\"nextId\\": null,
+          \\"parentId\\": 26,
+          \\"nextId\\": 30,
           \\"node\\": {
-            \\"type\\": 3,
-            \\"textContent\\": \\"\\\\n    \\",
+            \\"type\\": 2,
+            \\"tagName\\": \\"b\\",
+            \\"attributes\\": {},
+            \\"childNodes\\": [],
             \\"rootId\\": 11,
-            \\"id\\": 31
+            \\"id\\": 28
           }
         },
         {
-          \\"parentId\\": 17,
-          \\"nextId\\": null,
+          \\"parentId\\": 26,
+          \\"nextId\\": 28,
           \\"node\\": {
-            \\"type\\": 2,
-            \\"tagName\\": \\"div\\",
-            \\"attributes\\": {},
-            \\"childNodes\\": [],
+            \\"type\\": 3,
+            \\"textContent\\": \\"\\\\n        \\",
             \\"rootId\\": 11,
-            \\"id\\": 33
+            \\"id\\": 27
           }
         },
         {
-          \\"parentId\\": 33,
+          \\"parentId\\": 28,
           \\"nextId\\": null,
           \\"node\\": {
-            \\"type\\": 2,
-            \\"tagName\\": \\"span\\",
-            \\"attributes\\": {},
-            \\"childNodes\\": [],
+            \\"type\\": 3,
+            \\"textContent\\": \\"1\\",
             \\"rootId\\": 11,
-            \\"id\\": 24
+            \\"id\\": 29
           }
         }
       ]
diff --git a/packages/rrweb/test/record/mutation.test.ts b/packages/rrweb/test/record/mutation.test.ts
new file mode 100644
index 0000000000..007bff68cf
--- /dev/null
+++ b/packages/rrweb/test/record/mutation.test.ts
@@ -0,0 +1,288 @@
+/**
+ * @vitest-environment jsdom
+ */
+//import MutationBuffer from '../mutation';
+//import type { MutationBufferParam } from '../../types';
+/*
+
+describe('Processing mutations', () => {
+
+  describe('Large list 1 perf', () => {
+    const mutationBuffer = new MutationBuffer();
+    const options: MutationBufferParam = {
+    };
+    mutationBuffer.init(options);
+
+    mutationBuffer.processMutations([]);
+  });
+*/
+
+import * as fs from 'fs';
+import * as path from 'path';
+import { vi } from 'vitest';
+
+import {
+  assertSnapshot,
+  getServerURL,
+  ISuite,
+  launchPuppeteer,
+  startServer,
+  waitForRAF,
+} from '../utils';
+import { EventType, eventWithTime, listenerHandler } from '@rrweb/types';
+import { recordOptions } from '../../src/types';
+
+interface IWindow extends Window {
+  rrweb: {
+    record: (
+      options: recordOptions<eventWithTime>,
+    ) => listenerHandler | undefined;
+    addCustomEvent<T>(tag: string, payload: T): void;
+  };
+  emit: (e: eventWithTime) => undefined;
+}
+
+describe('mutation', () => {
+  vi.setConfig({ testTimeout: 100_000 });
+  let code: ISuite['code'];
+  let page: ISuite['page'];
+  let browser: ISuite['browser'];
+  let server: ISuite['server'];
+  let serverURL: ISuite['serverURL'];
+  let events: ISuite['events'];
+
+  beforeAll(async () => {
+    server = await startServer();
+    serverURL = getServerURL(server);
+    browser = await launchPuppeteer();
+
+    const bundlePath = path.resolve(__dirname, '../../dist/rrweb.umd.cjs');
+    code = fs.readFileSync(bundlePath, 'utf8');
+  });
+
+  afterEach(async () => {
+    await page.close();
+  });
+
+  afterAll(async () => {
+    await server.close();
+    await browser.close();
+  });
+
+  beforeEach(async () => {
+    page = await browser.newPage();
+    page.on('console', (msg) => {
+      console.log(msg.text());
+    });
+
+    await page.goto(`${serverURL}/html/mutation.html`);
+    await page.addScriptTag({
+      path: path.resolve(__dirname, '../../dist/rrweb.umd.cjs'),
+    });
+    await waitForRAF(page);
+    events = [];
+
+    await page.exposeFunction('emit', (e: eventWithTime) => {
+      if (e.type === EventType.DomContentLoaded || e.type === EventType.Load) {
+        return;
+      }
+      events.push(e);
+    });
+
+    page.on('console', (msg) => console.log('PAGE LOG:', msg.text()));
+
+    await page.evaluate(() => {
+      const { record } = (window as unknown as IWindow).rrweb;
+      record({
+        emit: (window as unknown as IWindow).emit,
+        slimDOMOptions: {
+          comment: true,
+        },
+      });
+    });
+
+    await waitForRAF(page);
+  });
+
+  it('add elements all at once', async () => {
+    await page.evaluate(() => {
+      const d1 = document.createElement('div');
+      d1.id = 'd1';
+      const s1 = document.createElement('span');
+      d1.append(s1);
+      const d2 = document.createElement('div');
+      d2.id = 'd2';
+      const s2 = document.createElement('span');
+      d2.append(s2);
+      const d3 = document.createElement('div');
+      d3.id = 'd3';
+      const s3 = document.createElement('span');
+      d3.append(s3);
+
+      d1.append(d2);
+      d1.append(d3);
+      document.body.append(d1);
+    });
+    await waitForRAF(page);
+    const mutations = events.filter(
+      (e) => e.type === EventType.IncrementalSnapshot,
+    );
+    await assertSnapshot(mutations, true);
+  });
+
+  it('add root first', async () => {
+    await page.evaluate(() => {
+      const d1 = document.createElement('div');
+      d1.id = 'd1';
+      const s1 = document.createElement('span');
+      d1.append(s1);
+      document.body.append(d1);
+      const d2 = document.createElement('div');
+      d2.id = 'd2';
+      const s2 = document.createElement('span');
+      d2.append(s2);
+      const d3 = document.createElement('div');
+      d3.id = 'd3';
+      const s3 = document.createElement('span');
+      d3.append(s3);
+
+      d1.append(d2);
+      d1.append(d3);
+    });
+    await waitForRAF(page);
+    const mutations = events.filter(
+      (e) => e.type === EventType.IncrementalSnapshot,
+    );
+
+    // assert has same output as previous test despite difference in way elements are added to DOM
+    //await assertSnapshot(mutations, 'mutation.test.ts.mutation.add_elements_all_at_once');
+
+    await assertSnapshot(mutations, true);
+  });
+
+  it('ignored firstchild comment', async () => {
+    await page.evaluate(() => {
+      const d1 = document.createElement('div');
+      document.body.append(d1);
+      const c1 = document.createComment('slimdom ignored');
+      const siblingDiv = document.createElement('div');
+      d1.append(c1);
+      d1.append(siblingDiv);
+    });
+    await waitForRAF(page);
+    const mutations = events.filter(
+      (e) => e.type === EventType.IncrementalSnapshot,
+    );
+    await assertSnapshot(mutations, true);
+  });
+
+  it('ignored middlechild comment', async () => {
+    await page.evaluate(() => {
+      const d1 = document.createElement('div');
+      document.body.append(d1);
+      const c1 = document.createComment('slimdom ignored');
+      const siblingDiv = document.createElement('div');
+      const siblingDiv2 = document.createElement('div');
+      d1.append(siblingDiv);
+      d1.append(c1);
+      d1.append(siblingDiv2);
+    });
+    await waitForRAF(page);
+    const mutations = events.filter(
+      (e) => e.type === EventType.IncrementalSnapshot,
+    );
+    await assertSnapshot(mutations, true);
+  });
+
+  it('ignored endchild comment', async () => {
+    await page.evaluate(() => {
+      const d1 = document.createElement('div');
+      document.body.append(d1);
+      const c1 = document.createComment('slimdom ignored');
+      const siblingDiv = document.createElement('div');
+      d1.append(siblingDiv);
+      d1.append(c1);
+    });
+    await waitForRAF(page);
+    const mutations = events.filter(
+      (e) => e.type === EventType.IncrementalSnapshot,
+    );
+    await assertSnapshot(mutations, true);
+  });
+
+  it('blocked firstchild element', async () => {
+    await page.evaluate(() => {
+      const d1 = document.createElement('div');
+      document.body.append(d1);
+      const b1 = document.createElement('div');
+      b1.className = 'rr-block';
+      b1.append(document.createElement('div')); // shouldn't show up
+      b1.append(document.createElement('div')); // shouldn't show up
+      const siblingDiv = document.createElement('div');
+      d1.append(b1);
+      d1.append(siblingDiv);
+    });
+    await waitForRAF(page);
+    const mutations = events.filter(
+      (e) => e.type === EventType.IncrementalSnapshot,
+    );
+    await assertSnapshot(mutations, true);
+  });
+
+  it('blocked middlechild element', async () => {
+    await page.evaluate(() => {
+      const d1 = document.createElement('div');
+      document.body.append(d1);
+      const b1 = document.createElement('div');
+      b1.className = 'rr-block';
+      b1.append(document.createElement('div')); // shouldn't show up
+      b1.append(document.createElement('div')); // shouldn't show up
+      const siblingDiv = document.createElement('div');
+      const siblingDiv2 = document.createElement('div');
+      d1.append(siblingDiv);
+      d1.append(b1);
+      d1.append(siblingDiv2);
+    });
+    await waitForRAF(page);
+    const mutations = events.filter(
+      (e) => e.type === EventType.IncrementalSnapshot,
+    );
+    await assertSnapshot(mutations, true);
+  });
+
+  it('blocked endchild element', async () => {
+    await page.evaluate(() => {
+      const d1 = document.createElement('div');
+      document.body.append(d1);
+      const b1 = document.createElement('div');
+      b1.className = 'rr-block';
+      b1.append(document.createElement('div')); // shouldn't show up
+      b1.append(document.createElement('div')); // shouldn't show up
+      const siblingDiv = document.createElement('div');
+      d1.append(siblingDiv);
+      d1.append(b1);
+    });
+    await waitForRAF(page);
+    const mutations = events.filter(
+      (e) => e.type === EventType.IncrementalSnapshot,
+    );
+    await assertSnapshot(mutations, true);
+  });
+
+  it('siblings added in idleCallback', async () => {
+    await page.evaluate(() => {
+      document.body.childNodes.forEach((cn) => document.body.removeChild(cn)); // clear out text nodes created by server
+      document.body.prepend(document.createElement('div'));
+      requestAnimationFrame(() => {
+        //rrweb.freezePage();
+        document.body.prepend(document.createElement('div'));
+        document.body.append(document.createElement('div'));
+      });
+    });
+    await waitForRAF(page);
+    const mutations = events.filter(
+      (e) => e.type === EventType.IncrementalSnapshot,
+    );
+    await assertSnapshot(mutations, true);
+  });
+});
diff --git a/packages/rrweb/test/utils.ts b/packages/rrweb/test/utils.ts
index 9699543a4a..45f7725e4f 100644
--- a/packages/rrweb/test/utils.ts
+++ b/packages/rrweb/test/utils.ts
@@ -26,7 +26,7 @@ export async function launchPuppeteer(
       width: 1920,
       height: 1080,
     },
-    args: ['--no-sandbox'],
+    args: ['--no-sandbox', '--disable-setuid-sandbox'],
     ...options,
   });
 }
@@ -60,7 +60,7 @@ export const startServer = (defaultPort = 3030) =>
 
       let pathname = path.join(__dirname, sanitizePath);
       if (/^\/rrweb.*\.c?js.*/.test(sanitizePath)) {
-        pathname = path.join(__dirname, `../dist/main`, sanitizePath);
+        pathname = path.join(__dirname, `../dist`, sanitizePath);
       }
 
       try {
@@ -301,6 +301,7 @@ function stringifyDomSnapshot(mhtml: string): string {
 
 export async function assertSnapshot(
   snapshotsOrPage: eventWithTime[] | puppeteer.Page,
+  useOwnFile: boolean | string = false,
 ) {
   let snapshots: eventWithTime[];
   if (!Array.isArray(snapshotsOrPage)) {
@@ -318,7 +319,21 @@ export async function assertSnapshot(
   }
 
   expect(snapshots).toBeDefined();
-  expect(stringifySnapshots(snapshots)).toMatchSnapshot();
+
+  if (useOwnFile) {
+    // e.g. 'mutation.test.ts > mutation > add elements at once'
+    const long_fname = expect.getState().currentTestName.split('/').pop();
+    const file = long_fname.split(' > ')[0].replace('.test.ts', '');
+    if (typeof useOwnFile !== 'string') {
+      useOwnFile = long_fname.substring(long_fname.indexOf(' > ') + 3);
+    }
+    useOwnFile = useOwnFile.replace(/ > /g, '.').replace(/\s/g, '_');
+
+    const fname = `./__${file}.snapshots__/${useOwnFile}.json`;
+    expect(stringifySnapshots(snapshots)).toMatchFileSnapshot(fname);
+  } else {
+    expect(stringifySnapshots(snapshots)).toMatchSnapshot();
+  }
 }
 
 export function replaceLast(str: string, find: string, replace: string) {
diff --git a/packages/rrweb/vite.config.js b/packages/rrweb/vite.config.js
index be00490b64..90c830207a 100644
--- a/packages/rrweb/vite.config.js
+++ b/packages/rrweb/vite.config.js
@@ -1,4 +1,3 @@
 import config from '../../vite.config.default';
 
-// export default config('src/index.ts', 'rrweb', { outputDir: 'dist/main' });
 export default config('src/index.ts', 'rrweb');