Open billyvg opened 9 months ago
We include a fork of https://github.com/reworkcss/css in order to make the correct transformations on the CSS correctly.
Could you check how fast the previous incarnation of addHoverClass
performs against your test case? i.e. prior to 61a99c642a7e2b37be96b6ff9dbaf8dd42b90c42 ?
I can't think of any easy wins without delving into that css.ts code.
There is also the possibility of doing this transformation statically on the server side prior to replay (which is currently out of scope of rrweb code), and turning off the 'hackCss' config option if this is the case.
Might be helped by https://github.com/rrweb-io/rrweb/pull/1458
Also #1480 which will move the CSS traversing into the browser and out of javascript.
A benchmark comparison of these different methods would be super useful @billyvg !
addHoverClass()
performs poorly on large stylesheets and causes the main UI thread to lock-up. On a stylesheet wherecssText
is ~2.4MB, with 2500+ selectors, and a selectorMatcher regex roughly ~400KB large, this blocks my UI thread for roughly ~10-15 seconds on a M1 macbook using Chrome.