darkreader / darkreader/darkreader

[Performance Issue] Large number of SVGs (e.g. eBay) make websites unusable

Open
#14,563 1 comment 1 reaction 0 assignees View on GitHub
Performance Issue Safari
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:
Image

After enabling DR the initial paint takes about 2000ms, which is at best 2-4x slower than without the plugin enabled:
Image

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:
Image

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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.