1789268 - DrawSurfaceWithShadow in canvas is very slow

Status: VERIFIED FIXED

(Core :: Graphics: Canvas2D, defect, P3)

Description

[Nazım Can Altınova [:canova][:canaltinova on phabricator]]

I was looking at a website I found and the performance of it was very poor. It was drawing one frame every 7 seconds. On the other hand Chrome is silky smooth.

Here's the website: https://ubähnchen.vercel.app/en
Here's a Firefox Profiler profile: https://share.firefox.dev/3CVEIh1

If you look at the profile, the content process shows that the nearly all the time is spent inside mozilla::gfx::DrawTargetWebgl::DrawSurfaceWithShadow.
It's probably because we do this on software and Chrome uses hardware acceleration. Would doing the same for us also fix this issue?

Comment 1

[Denis Palmeiro [:denispal]]

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

Platforms: [x] Windows [x] macOS [x] Linux
Impact on browser: Causes noticeable jank
Impact on site: Causes noticeable jank
Page load impact: Some
[x] Affects animation smoothness
[x] Able to reproduce locally

Comment 2

[Mayank Bansal]

This is worse with gpu-canvas: https://share.firefox.dev/3gSoAV0

Comment 3

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

The severity field for this bug is set to S3. However, the Performance Impact field flags this bug as having a high impact on the performance.
:bhood, could you consider increasing the severity of this performance-impacting bug? Alternatively, if you think the performance impact is lower than previously assessed, could you request a re-triage from the performance team by setting the Performance Impact flag to ??

For more information, please visit auto_nag documentation.

Comment 4

[Bob Hood [:bhood]]

I get the same result as the OP using current release, so this is definitely a performance problem. Lee, anything we can do here?

Comment 5

[Jonathan Kew [:jfkthame]]

Attachment: Bug 1789268 - Pass bounds when creating an AdjustedTarget for canvas text with filter or shadow. r=lsalzman

Comment 6

[Jonathan Kew [:jfkthame]]

This patch makes the performance vastly better for me (tested on macOS, but presumably helps similarly on others). Still doesn't look as smooth as Chrome, I think, but at least it's quite usable.

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/09e3461334bc
Pass bounds when creating an AdjustedTarget for canvas text with filter or shadow. r=lsalzman

Comment 8

[Norisz Fay [:noriszfay]]

https://hg.mozilla.org/mozilla-central/rev/09e3461334bc

Comment 9

[Ina Popescu, Desktop QA]

Attachment: website performance.mp4

Comment 10

[Ina Popescu, Desktop QA]

Hello Nazım Can Altınova, we tried to verify this fix on our side and noticed that in Firefox 109.0b4 and Nightly 110.0a1 the website https://ubähnchen.vercel.app/en runs pretty smoothly, but still not as smoothly as it does in Chrome. I will attach a screen recording of how it is working on our side.
Could you please let us know how is the website working on your side using the latest versions Firefox 109.0b4 and Nightly 110.0a1?

Comment 11

[Jonathan Kew [:jfkthame]]

(In reply to Ina Popescu from comment #10)

Hello Nazım Can Altınova, we tried to verify this fix on our side and noticed that in Firefox 109.0b4 and Nightly 110.0a1 the website https://ubähnchen.vercel.app/en runs pretty smoothly, but still not as smoothly as it does in Chrome. I will attach a screen recording of how it is working on our side.

This is greatly improved from the performance in 108, right? If so, I think we can say the patch here is working as expected. For the remaining difference from Chrome, it might be worth filing a new bug (and capturing a new performance profile) as a followup.

Comment 12

[Nazım Can Altınova [:canova][:canaltinova on phabricator]]

It runs very smoothly on my machine now but my machine is pretty powerful (M1 max macbook). From the video it looks like the performance is greatly improved indeed. Previously I was getting a single frame every 7 seconds or so (with the same machine), so this is definitely a huge upgrade. I would say this patch is working as expected. I can file another bug with a new profile later.

Thanks for improving the performance!

Comment 13

[Jonathan Kew [:jfkthame]]

Ina Popescu: it looks like your testing in comment 9 video is on a less powerful machine (it's noticeably less smooth than what I get on mine), so it might be useful to get a profile from that system to see what the remaining bottlenecks may be. (But in a new bug, please, to avoid confusion.)

Comment 14

[Bas Schouten (:bas.schouten)]

It looks reasonable on my machine but not supersmooth. This is a very powerful machine and a profile shows us we're spending most of our time creating and destroying the temporary surfaces: https://share.firefox.dev/3HNryoN

I wonder if there's room here for re-using surfaces.

Comment 15

[Ina Popescu, Desktop QA]

(In reply to Jonathan Kew [:jfkthame] from comment #13)

Ina Popescu: it looks like your testing in comment 9 video is on a less powerful machine (it's noticeably less smooth than what I get on mine), so it might be useful to get a profile from that system to see what the remaining bottlenecks may be. (But in a new bug, please, to avoid confusion.)

Indeed the performance of the website was insignificantly improved on both Firefox 109.0b4 and Nightly 110.0a1. The website is not performing as smoothly as Chrome on Windows 10. For this I've filed Bug 1806597 as follow up.