1842382 - Memory leak when SVG sprites are loaded (3300 SVGs)

Status: UNCONFIRMED

(Core :: Graphics: ImageLib, defect)

Description

[i.vinnykov]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36

Steps to reproduce:

When I run Firefox on Windows 10 x64 (or on Android) and access the site that loads 3300 SVG logos from SVG sprites, Firefox freezes, memory usage grows continously (is over 7 GB), SVGs aren't displayed correctly.

Steps to reproduce:

1. Open https://leave-russia.org/
2. Start typing in the Search... box and then remove entered data. The site uses on-client search, so all content is loaded (all 3300 SVG from 68 SVG sprites) and then DOM is filtered.

Actual results:

Page is displayed incorrectly. SVGs are loaded very slowly. Constant memory usage growth, over 7 GB.

Expected results:

In Chrome, Safari the same site in the same case works well. All logos are loaded and displayed in a second.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::Performance' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[BugBot [:suhaib / :marco/ :calixte]]

This bug was moved into the Performance component.

:i.vinnykov, could you make sure the following information is on this bug?

• For slowness or high CPU usage, capture a profile with http://profiler.firefox.com/, upload it and share the link here.
• For memory usage issues, capture a memory dump from about:memory and attach it to this bug.
• Troubleshooting information: Go to about:support, click "Copy raw data to clipboard", paste it into a file, save it, and attach the file here.

If the requested information is already in the bug, please confirm it is recent.

Thank you.

Comment 3

[i.vinnykov]

I reproduced the problem and captured memory and support info. I'm attaching the files.
Please note that during reproduction the page almost freezed, Windows Task Manager shows Firefox memory usage for over 5 GB. I closed Firefox because the memory dump file had 0 size during the long time. After closing Firefox the file was created.

Comment 4

[i.vinnykov]

Attachment: about.txt

Comment 5

[i.vinnykov]

Attachment: memory-report.json.gz

Comment 6

[Timothy Nikkel (:tnikkel)]

Here is a profile

https://share.firefox.dev/3OaJkoQ

The majority is categorized as javascript by the profiler, but looking at the actual stacks it looks like it is actually dom code (called from js), and then some layout and network code.

Comment 7

[i.vinnykov]

In this case the following actions happen. This website uses client-side loading, so when search is activated, JS code retrieves data from the server. There are 3300+ entries, they are addedd to DOM. Entries include SVG images (logos of companies). The website uses SVG sprites where each sprite (gzipped) includes 50 logos. So when DOM is populates the browser needs to load 69 small sprites and render 3300 SVGs from these sprites.

The same page (with the search) works well on other browsers, such as Chrome, Safari, etc. The page rendering with all 3300 images takes a few seconds on desktop or even on mobile.

In case of Firefox rendering is blocked, the problem is in SVG rendering, because images appear very slowly. Windows Task Manager shows continuous memory usage growth - it can be 10 GB (and counting) and even in this case not all logos are displayed.

Comment 8

[Timothy Nikkel (:tnikkel)]

It sounds like you might be involved in the construction this site? Can you provide a stripped down site that just performs the actions that are much worse in Firefox?

Comment 9

[i.vinnykov]

There is the reason of the problem - Firefox doesn't properly loads SVG sprites. I've submitted a new bug about this at https://bugzilla.mozilla.org/show_bug.cgi?id=1843027.

To reproduce the problem open Web Developer Tools, switch to Network and open https://leave-russia.org/. As you can see, Firefox loads the same sprite (for example, sprite-01.svg) multiple times. That's the problem.

SVG sprites are designed to reduce a number of network calls. For example, when 50 logos are combined in sprite, a browser loads the sprite once. That's how other browsers work. In case of Firefox, it loads the same sprite as much times as logos from the sprite is represented on the page. In other words, it loads 50 times the same sprite file (which in size is bigger than the standalone SVG logo, because it includes multiple logos). So instead of saving memory for SVG sprites it uses much more memory.

Comment 10

[i.vinnykov]

Attachment: A standalone test site

A standalone test site is attached. It can be opened locally on the file system or deployed to any server.

When running on Windows page opens in Firefox during 30-40 sec. Firefox uses 6.5 GB or RAM. In Chrome the same page opens in 2-3 sec and uses 200 MB of RAM.

Comment 11

[Benjamin De Kosnik [:bdekoz]]

This is hitting a known defect in firefox, the originating bugzilla for which is here:
https://bugzilla.mozilla.org/show_bug.cgi?id=1027106

We've asked for comment from that component owner.

Comment 12

[Alex Thayer [:alexical] (she/her)]

(In reply to Benjamin De Kosnik [:bdekoz] from comment #11)

This is hitting a known defect in firefox, the originating bugzilla for which is here:
https://bugzilla.mozilla.org/show_bug.cgi?id=1027106

We've asked for comment from that component owner.

Benjamin, how did you determine this? Should we just dupe this to that?

Comment 13

[Benjamin De Kosnik [:bdekoz]]

Hey Doug, sorry about the delay.

BZ chain: this->1843027->1027106

All these related bugs are being closed as a dupe, so maybe this one should as well?

Comment 14

[Markus Stange [:mstange]]

Profile of loading the testcase (attachment 9343717 [details]): https://share.firefox.dev/44OfpYP
Profile of following the STR in comment 0: https://share.firefox.dev/4840Mn3

They show different problems. I agree that the problem in the attached testcase would be addressed by bug 1027106.
But the problem on leave-russia.org seems different: The site is manually using XMLHttpRequest and DOMParser.parseFromString to load the individual SVGs.

Comment 15

[Bas Schouten (:bas.schouten)]

The Performance Impact Calculator has determined this bug's performance impact to be low. If you'd like to request re-triage, you can reset the Performance Impact flag to "?" or needinfo the triage sheriff.

Platforms: Windows
Page load impact: Some
Websites affected: Rare
[x] Able to reproduce locally

Comment 16

[Jim Mathies [:jimm]]

Temp change, ignore.