diff --git a/.changeset/skip-mask-check-on-leaf-elements.md b/.changeset/skip-mask-check-on-leaf-elements.md new file mode 100644 index 0000000000..b54de0a4ba --- /dev/null +++ b/.changeset/skip-mask-check-on-leaf-elements.md @@ -0,0 +1,6 @@ +--- +"rrweb-snapshot": patch +"rrweb": patch +--- + +optimisation: skip mask check on leaf elements diff --git a/packages/rrweb-snapshot/src/snapshot.ts b/packages/rrweb-snapshot/src/snapshot.ts index 40c932e9b1..ba9ef0448a 100644 --- a/packages/rrweb-snapshot/src/snapshot.ts +++ b/packages/rrweb-snapshot/src/snapshot.ts @@ -326,12 +326,21 @@ export function needMaskingText( maskTextSelector: string | null, checkAncestors: boolean, ): boolean { + let el: Element; + if (isElement(node)) { + el = node; + if (!el.childNodes.length) { + // optimisation: we can avoid any of the below checks on leaf elements + // as masking is applied to child text nodes only + return false; + } + } else if (node.parentElement === null) { + // should warn? maybe a text node isn't attached to a parent node yet? + return false; + } else { + el = node.parentElement; + } try { - const el: HTMLElement | null = - node.nodeType === node.ELEMENT_NODE - ? (node as HTMLElement) - : node.parentElement; - if (el === null) return false; if (typeof maskTextClass === 'string') { if (checkAncestors) { if (el.closest(`.${maskTextClass}`)) return true; @@ -440,7 +449,7 @@ function serializeNode( mirror: Mirror; blockClass: string | RegExp; blockSelector: string | null; - needsMask: boolean | undefined; + needsMask: boolean; inlineStylesheet: boolean; maskInputOptions: MaskInputOptions; maskTextFn: MaskTextFn | undefined; @@ -544,7 +553,7 @@ function serializeTextNode( n: Text, options: { doc: Document; - needsMask: boolean | undefined; + needsMask: boolean; maskTextFn: MaskTextFn | undefined; rootId: number | undefined; }, @@ -1006,10 +1015,7 @@ export function serializeNodeWithId( let { needsMask } = options; let { preserveWhiteSpace = true } = options; - if ( - !needsMask && - n.childNodes // we can avoid the check on leaf elements, as masking is applied to child text nodes only - ) { + if (!needsMask) { // perf: if needsMask = true, children won't also need to check const checkAncestors = needsMask === undefined; // if false, we've already checked ancestors needsMask = needMaskingText(