search

rrweb-io / rrweb

record and replay the web
https://www.rrweb.io/
MIT License
16.43k stars 1.41k forks source link

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

Open billyvg opened 9 months ago

billyvg commented 9 months ago

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.

eoghanmurray commented 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.

daibhin commented 3 months ago

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

eoghanmurray commented 3 months ago

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 !