[Bug]: splitCssText causes degraded performance when recording #1603
Description
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.0.0-alpha.18
Expected Behavior
rrweb should not have a significant impact on an application/site when recording data.
Actual Behavior
Whenever markCssSplits is called, we have observed significantly degraded performance caused by splitCssText maxing out the JS heap.
Steps to Reproduce
Reproduction steps with browser extensions:
In the wild, we were seeing this issue with customers who were using chrome extensions that are injecting CSS in to the page. We've seen the issue with our customers using the Grammarly browser extension and Sider AI browser extension. To reproduce the issue this way:
- Install one these two extensions.
- Open a page that has rrweb recordind data.
- In the case of Grammarly, you just need to click in an input in a form and that should trigger the extension to start injecting code that will trigger the issue. For Sider AI, you need to open the extension and a side bar will appear that triggers the issue.
Simple reproduction steps (not using a browser extension):
- Serve the following HTML file using a simple http server. For example. I used http-server.
<html>
<head>
// test.css can really contain anything, it's super important for this test
<link href="test.css"rel="stylesheet">
// benchmark.css is the css file used for benchmarking in /packages/rrweb-snaphsot/test/css
// choosen b/c it's pretty large
<link href="benchmark.css"rel="stylesheet">
<title>Home</title>
<textarea></textarea>
<script type="module">
// This is the record.js file from /packages/record/dist created after running yarn && yarn build:all in the root of the repo
// commented out for now
// import { record } from './record.js';
const stylesheet = document.getElementsByTagName('link')[1].sheet;
let cssString = '';
// Check if the stylesheet is loaded
if (stylesheet.rules) {
// Get all the CSS rules as a string
for (let i = 0; i < stylesheet.cssRules.length; i++) {
cssString += stylesheet.cssRules[i].cssText;
}
}
var recorder = record({
emit(event) {
console.log(event);
},
});
const newStyleEl = document.createElement('style');
document.body.appendChild(newStyleEl);
// adds Text Nodes to the <style> element so that markCssSplits gets executed.
newStyleEl.appendChild(document.createTextNode(cssString));
newStyleEl.appendChild(document.createTextNode(cssString));
</script>
</html>- Open the URL were the HTML file is being served. For my example that was
http://127.0.0.1:8080. - Using Google Chrome, start taking a performance profile.
- Uncomment this line
// import { record } from './record.js';and refresh the page. - Stop recording the performance profile. Note this seems to be enough to lock up the browser so you may need to refresh to get the performance profile to finish loading.
- You should see something akin to the following in the performance profile:
Testcase Gist URL
No response
Additional Information
Just for reference, here is the commit that added splitCssTest
This issue seems to be related, but looks to be more of a problem on the playback side (unless I am misunderstanding 😅 ).
Benchmark
IDK how helpful this would be, but I created a simple benchmark for splitCssText in /packages/rrweb-snapshot/test/stringify-stylesheet.bench.ts
describe('splitCssText', () => {
const style: HTMLStyleElement = document.createElement('style');
const style2: HTMLStyleElement = document.createElement('style');
const cssText = fs.readFileSync(
path.resolve(__dirname, './css/benchmark.css'),
'utf8',
);
style.textContent = cssText;
style2.textContent = cssText;
style2.appendChild(document.createTextNode(cssText));
style2.appendChild(document.createTextNode(cssText));
bench(
'splitCssText',
() => {
splitCssText(cssText, style);
},
{ time: 1000},
);
bench(
'splitCssText triggers nested for loops',
() => {
splitCssText(cssText, style2);
},
{ time: 1000},
);
});Here are the results I got:
Please let me know if there is any additional details I should provide. TY!