darkreader / darkreader/darkreader
[Performance Issue] Large number of SVGs (e.g. eBay) make websites unusable
- Dominant language
- TypeScript
- Stars
- 22.4k
- Forks
- 2.7k
- Avg merge
- 21h 11m
- Merged PRs (30d)
- 78
Description
### Prerequisites
- [x] I [searched for any existing report](https://github.com/darkreader/darkreader/issues?q=is%3Aissue) about this performance issue to avoid opening a duplicate.
- [x] I have restarted the web browser to check if that resolved this performance issue.
- [x] I can reproduce this performance issue in a new, unmodified web browser profile with Dark Reader installed as the only extension.
### Performance Issue Description
I noticed this issue on multiple unrelated websites, with eBay being by far the worst. Upon investigation I think the culprit may be reliance on SVGs. I may be wrong here, as I don't have extensive experience in performance debugging in Safari. However, I recorded a few traces.
A base load of a search page in Safari, with DR disabled, reveals a typical rendering pattern:
After enabling DR the initial paint takes about 2000ms, which is at best 2-4x slower than without the plugin enabled:
What's worse however, scrolling below the fold makes the website nearly unusable. Each chunk of the page (which appears to be ~1.5x of the window height) takes 4000-6000ms to render & paint. Profiling the hot path of scrolling it appears that `getBoundingClientRect()` used in the SVG pipeline is **very** slow - just ~400 calls took over 6 seconds:
Given the comment in the code below, I'm guessing the `getBoundingClientRect()` computation itself doesn't actually take a lot of time, but the constant layout changes do. As I don't know the DR codebase, I unfortunately don't see an obvious potential for optimization here.
https://github.com/darkreader/darkreader/blob/ddba87e47e34bf7003826e409e9569908eb06622/src/inject/dynamic-theme/inline-style.ts#L457-L463
### Website Address
https://www.ebay.com/sch/i.html?_nkw=PM1733&&_osacat=0
### Steps To Reproduce
1. Open website in question
2. Scroll
### Performance Profile
N/A (Safari issue); please let me know if Safari profile is desired.
### Screenshots
_No response_
### Operating System
macOS 15.5 (24F74)
### Web Browser name and version
Safari 18.5 (20621.2.5.11.8)
### Dark Reader version
2.1.2
### Does this happen when Dark Reader is disabled?
No
### Does this happen in other web browsers?
No
### Additional Context
- Testing in Chrome the issue appears to exist as well, but is **significantly** less severe (i.e. ~50-60ms stutters vs 6000ms repaints)
Contributor guide
Assessment
This issue has not been assessed yet.