1839242 - svg high cpu usage

Status: NEW

(Core :: Graphics: WebRender, defect)

Description

[Syth-1]

Attachment: circle.svg

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/114.0

Steps to reproduce:

had add the following svg on website:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 800 800">
<defs>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="cccoil-grad">
<stop stop-color="hsl(206, 75%, 49%)" stop-opacity="1" offset="0%" data-darkreader-inline-stopcolor=""></stop>
<stop stop-color="hsl(331, 90%, 56%)" stop-opacity="1" offset="100%" data-darkreader-inline-stopcolor=""></stop>
</linearGradient>

<linearGradient id="fadeGrad" y2="1" x2="0">
  <stop offset="0" stop-color="white" stop-opacity="1"/>
  <stop offset="0.3" stop-color="white" stop-opacity="1"/>
  <stop offset="0.5" stop-color="white" stop-opacity="0"/>
</linearGradient>

<mask id="fade" maskContentUnits="objectBoundingBox">
  <rect width="1" height="1" fill="url(#fadeGrad)"/>
</mask>

</defs>

<g stroke="url(#cccoil-grad)" fill="none" stroke-linecap="round" mask="url(#fade)">
<g transform="rotate(0, 400, 400)">
<circle r="376" cx="400" cy="400" stroke-width="7.5" stroke-dasharray="2362 2362" transform="rotate(360, 400, 400)" opacity="0.05"></circle>
<circle r="352.5" cx="400" cy="400" stroke-width="7.5" stroke-dasharray="2067 2215" transform="rotate(336, 400, 400)" opacity="0.11"></circle>
<circle r="329" cx="400" cy="400" stroke-width="7.5" stroke-dasharray="1792 2067" transform="rotate(312, 400, 400)" opacity="0.18"></circle>
<circle r="305.5" cx="400" cy="400" stroke-width="7.5" stroke-dasharray="1536 1920" transform="rotate(288, 400, 400)" opacity="0.24"></circle>
<circle r="282" cx="400" cy="400" stroke-width="7.5" stroke-dasharray="1299 1772" transform="rotate(264, 400, 400)" opacity="0.30"></circle>
<circle r="258.5" cx="400" cy="400" stroke-width="7.5" stroke-dasharray="1083 1624" transform="rotate(240, 400, 400)" opacity="0.37"></circle>
<circle r="235" cx="400" cy="400" stroke-width="7.5" stroke-dasharray="886 1477" transform="rotate(216, 400, 400)" opacity="0.43"></circle>
<circle r="211.5" cx="400" cy="400" stroke-width="7.5" stroke-dasharray="709 1329" transform="rotate(192, 400, 400)" opacity="0.49"></circle>
<circle r="188" cx="400" cy="400" stroke-width="7.5" stroke-dasharray="551 1181" transform="rotate(168, 400, 400)" opacity="0.56"></circle>
<circle r="164.5" cx="400" cy="400" stroke-width="7.5" stroke-dasharray="413 1034" transform="rotate(144, 400, 400)" opacity="0.62"></circle>
<circle r="141" cx="400" cy="400" stroke-width="7.5" stroke-dasharray="295 886" transform="rotate(120, 400, 400)" opacity="0.68"></circle>
<circle r="117.5" cx="400" cy="400" stroke-width="7.5" stroke-dasharray="197 738" transform="rotate(96, 400, 400)" opacity="0.75"></circle>
<circle r="94" cx="400" cy="400" stroke-width="7.5" stroke-dasharray="118 591" transform="rotate(72, 400, 400)" opacity="0.81"></circle>
<circle r="70.5" cx="400" cy="400" stroke-width="7.5" stroke-dasharray="59 443" transform="rotate(48, 400, 400)" opacity="0.87"></circle>
<circle r="47" cx="400" cy="400" stroke-width="7.5" stroke-dasharray="20 295" transform="rotate(24, 400, 400)" opacity="0.94"></circle>
<circle r="23.5" cx="400" cy="400" stroke-width="7.5" stroke-dasharray="0 148" opacity="1.00"></circle>

  <animateTransform
    id="spin-animation"
    attributeName="transform"
    attributeType="XML"
    type="rotate"
    from="0 400 400"
    to="360 400 400"
    dur="60s"
    repeatCount="indefinite"
/>
</g>

</g>
</svg>

Actual results:

extremely high cpu usage (50%), definitely not normal for the content it was displaying. In comparison to chrome which had a moderate cpu usage (~3%)

GPU usage was at normal levels 10%. hardware is more than adaquate. tested on 2 devices with same behaviour. no abnormal memory usages either.

Expected results:

cpu usage should not have reached abnormally high levels for the content the browser was displaying.

Comment 1

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

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

Comment 2

[Glenn Watson [:gw]]

I can reproduce this locally. It looks like there is a huge amount of time spent in blob rasterization on the WR worker threads. It looks like there might be a huge number of blobs, it's not clear to me from a profile whether it's related to rayon overhead, or actual useful work being done. Nical, would you have time to take a look at this?

Comment 3

[Nicolas Silva [:nical]]

The number of blobs looks reasonable (there are 2) although it would have been better if the svg would have been rendered in a single blob. There is a fading effect that is implemented as a mask via a gradient and it ends up going into a second (alpha-only) blob image.

From some local testing, rayon's overhead is more than I'd like but there is much more time spent in skia itself.

I suspect that we would do better here if the tile size was larger because the SVG uses stroke dashes for its effect and that typically creates some non trivial per-tile amount of work. Other than that and having two blobs instead of one, It looks like stuff that is unfortunately expensive to do via skia software and will be dramatically better when we finally put in place the infrastructure for filling and stroking on the GPU.

Comment 4

[Greg Mierzwinski [:sparky]]

The Performance Impact Calculator has determined this bug's performance impact to be medium. 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 [x] Android
Impact on site: Causes noticeable jank
Websites affected: Rare
[x] Causes severe resource usage
[x] Affects animation smoothness
[x] Able to reproduce locally