[Bug]: isParentRemoved lags by 1 to 3 seconds on pages with lots of nodes

[iwasrobbed]

Preflight Checklist

• I have searched the issue tracker for a bug report that matches the one I want to file, without success.

What package is this bug report for?

rrweb

Version

v2.25.0

Expected Behavior

Pages with a lot of nodes that can change—such as those that use the Lexical editor framework and changing highlighted sections within the editor—should not slow down the isParentRemoved node search / traversals.

Actual Behavior

If the page nodes change—such as when a person selects a different set of text to highlight within an editor that has a lot of nodes—the isParentRemoved takes a very long time to traverse recursively and slows down the entire node changes by 1 to 3 seconds at a minimum.

On slower CPUs, it can take up to 12 seconds at times.

So 1 to 3 seconds feels buggy, but 12 seconds is just impossible to deploy to production / customers.

Performance Logs

Example node structure

Basically, we render a transcript that contains speakers and the words they've spoken. Each word and whitespace is its own node which contains timestamp information in case the person wants to tap on the node to seek the video to that timestamp. Therefore there are a lot of nodes on each page.

Steps to Reproduce

• Create a page with lots of nodes (mix of parent and children), e.g. by using Lexical Editor to do so
• Record performance of a click on one of the nodes somewhere in the middle
• Notice that it creates a 1 to 3 second lag on the click handler
• When viewing performance log, notice all time is spent recursively in isParentRemoved

Testcase Gist URL

No response

Additional Information

I filed this with Sentry as well who packaged rrweb internally: getsentry/sentry-javascript#13074