rrweb icon indicating copy to clipboard operation
rrweb copied to clipboard

[perf] `addHoverClass()` performs poorly on large stylesheets

Open billyvg opened this issue 2 years ago • 3 comments

addHoverClass() performs poorly on large stylesheets and causes the main UI thread to lock-up. On a stylesheet where cssText 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.

billyvg avatar Nov 08 '23 21:11 billyvg

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.

eoghanmurray avatar Nov 13 '23 12:11 eoghanmurray

Might be helped by https://github.com/rrweb-io/rrweb/pull/1458

daibhin avatar May 22 '24 13:05 daibhin

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 !

eoghanmurray avatar May 23 '24 10:05 eoghanmurray